Question

我有这样的无序列表......

<div class="social">
<ul>
<li><a href="#">Find Me <img src="images/facebookGrey.png" width="50" border="0" style="vertical-align:middle;" class="facebook" /></a></li>
</ul>
</div>

我想要做的是设置一个悬停，这样当用户将鼠标悬停在该列表项上时，图像会发生变化。

这是我试过的css ..

.social ul img.facebook a:hover{
    background-image:url(images/facebook.png);
    width:50px;
}

任何想法？

Answer 1

应该是：

.social ul a:hover img.facebook

因为图像在锚内。

但是，最好一起删除img标记，然后只使用锚点并设置它的background-image属性。

Answer 2

您将背景图像与实际图像混淆。

将<a>的背景图片设置为images/facebookGrey.png，然后在悬停时更改背景图片。

Answer 3

图像位于链接内部，而不是相反。此外，您无法通过CSS更改图像的来源。设置背景将工作，但源代码将位于其上。从图像名称的外观来看，您将看不到任何效果。

尝试这样的事情：

<div class="social">
<ul>
<li><a href="#">Find Me</a></li>
</ul>
</div>

.social ul a {
    background-image: url(images/facebookGrey.png);
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 60px;
}
.social ul a:hover {
    background-image: url(images/facebook.png);
}

CSS悬停在链接列表项上

3 个答案: