当鼠标悬停父元素在ie中不工作时，更改img SRC

change img src when hover parent element not working in ie

本文关键字：工作 更改 SRC img 悬停 鼠标 元素 ie      更新时间：2023-09-26

我有这个代码，我想当鼠标悬停父(Li)标签，改变src子标签…这段代码在chrome中是正确的，但在firefox &不工作

<li class="player">
 .
 .
 //some code.......
 .
 .
  <table>
    <tr class="tr-msg">
      <td>
         <a>
            <img class="msg" src="../images/message-icon-h.png" />
         </a>
      </td>
    </tr>
  </table>
</li>
 <style>
   .player:hover .msg{
     content:url("../images/message-icon.png");
    }
 </style>

您调用了HTML代码中不存在的类.liplay。将其更改为.player，它将工作

.player:hover .msg{
     content:url("../images/message-icon.png");
}
演示工作

编辑:

我建议使用background-image属性来实现你想要的。你可以这样修改你的CSS:

.player a{
    display:block;
    background-image: url("../images/message-icon-h.png");
    width:64px;
    height:64px;
    }
.player:hover > a{
    display:block;
    background-image: url("../images/message-icon.png");
    width:64px;
    height:64px;
}

另一个演示小提琴

它在Chrome, FF, IE, Opera和Safari中工作

我认为你想这样做:

<style>
li.player:hover .msg
{
content:url("../images/message-icon.png");
}
</style>
相关文章：