css - CSS悬停在链接列表项上

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);
}