为什么我的图像在悬停时没有变化？

Question

我试过移动 id 并将第一张和第二张图片作为背景。为什么它不起作用？

HTML

<div class="brandsCarousel">
    <ul>
        <li class="logo"><a href="#"><img id="logo-gpjbaker"></a></li>
    </ul>
</div>

CSS

a #logo-gpjbaker {
    background-image: url(../images/logo-gpjbaker.png) center top no-repeat;
    max-width: 150px;
}

a #logo-gpjbaker:hover {
    background-image: url(../images/logo-gpjbaker2.png) center top no-repeat;
    max-width: 150px;
}

Answer 1

试试这个

a#logo-gpjbaker:hover

或者这个

#logo-gpjbaker:hover

这里有一个更好的例子：JSFIDDLE

Answer 2

它不起作用的原因是您的 a 和 #logo-gpjbaker:hover

之间的 space

http://codepen.io/jonathan/pen/Jdaova

应该是，这个没有space:

a#logo-gpjbaker:hover {
    background: url(logo-gpjbaker2.png) center top no-repeat;
    max-width: 150px;

    display:block; /* add this */
    height:50px; /* add this */
}

因为你的 id 在你的锚标签上或者只是使用 #logo-gpjbaker:hover

也可以尝试将您的 a 锚标记设置为 display:block，以便它填充其父项的整个 space。在使用锚标记作为触发器时应该随时使用它，因为它的默认显示设置为内联。

别忘了设置您的 height 属性。

为什么我的图像在悬停时没有变化？

Why isn't my image changing on hover?

image

hover