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之间的空格

<强> http://codepen.io/jonathan/pen/Jdaova

应该是，这没有空间：

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，以便填充其父级的整个空间。当使用锚标记作为触发器时，应该随时使用哪个，因为它的默认显示设置为内联。

不要忘记设置height属性。

Answer 2

试试这个

a#logo-gpjbaker:hover

或者

#logo-gpjbaker:hover

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

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

2 个答案: