Html 悬停图像效果

我有。在页脚我有一个社会图标列表

这是HTML代码：

<div class="social-list">
   <ul>
      <li id="first"><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri1.png" alt="Smiley face" height="30" width="30"></li>
      <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri2.png" alt="Smiley face" height="30" width="30"></li>
      <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri3.png" alt="Smiley face" height="30" width="30"></li>
      <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri4.png" alt="Smiley face" height="30" width="30"></li>
      <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri5.png" alt="Smiley face" height="30" width="30"></li>
   </ul>
</div>

我想在图像上创建一个悬停效果

我试过这么做，但不起作用：

#first:hover {
  background:url("http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/roz1.png");
}

---

此代码有什么问题？

问题是您正在将背景更改为

li

，但图像仍在顶部，因此它覆盖了它，您无法看到它

想法是移除

li

中的

img

，并专门与

li

背景一起工作。大概是这样的：

#first {
    background-image:url('http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri1.png'); 
    width:30px;
    height:30px;
    display:inline-block;
}

#first:hover {
    background-image:url('http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/roz1.png');
}

---

我在你网站的第一个li上没有看到任何ID。缓存问题？您希望创建什么效果？请指定您想要什么样的效果？那么为什么您希望

#首先：悬停
匹配任何内容？我添加了您的代码，但我遇到了相同的问题您删除了图像吗？您还需要为
li
指定宽度/高度以使其正常工作。悬停的图像未放置在我需要的位置。。。这个代码对你有用吗？检查答案的更新
#first {
    background-image:url('http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri1.png'); 
    width:30px;
    height:30px;
    display:inline-block;
}

#first:hover {
    background-image:url('http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/roz1.png');
}