Question

我有this site。在页脚中，我有一个带有社交图标的列表。

这是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>

这是.social-list的CSS代码：

.social-list {
  float: left;
  display: inline-block;
  margin-left: -92px;
}

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

我试图这样做，但它不起作用：

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

此代码有什么问题？

Answer 1

问题是您正在将背景更改为li，但图片仍位于顶部，因此它覆盖了它，您无法看到它。

我们的想法是删除img中的li，并专门使用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');
}

悬停图像效果CSS

1 个答案: