2 
#logo
{
    position: relative;
    width: 100px;
    height: 18px;
    float: right;

    background-image: url('../images/logo_def.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#logo a:hover
{
    background-image: url(../images/logo_h.png);
}

它可以工作，但是当鼠标悬停在它上面时，bg-image 不会改变，为什么？

4

6 回答 6

4

好吧，直接的问题是里面没有<a>元素#logo。更改您的第二条规则以针对正确的元素将“修复”此问题：

#footer a:hover
{
    background-image: url(../images/logo_h.png);
}

编辑：
正如评论中指出的那样：

第一条规则的样式应该应用于 A 元素，并且应该删除#logo DIV，因为它没有任何用途。

这确实是解决您的问题的更好方法，因为它将减少混乱并有助于防止将来进一步头痛。（感谢@Julian 的澄清）

于 2009-09-22T17:23:45.923 回答
2

背景图像最初分配给#logo。在 a:hover 上，ANCHOR 的背景图像发生了变化。因此，以下将起作用：

#logo a
{
    position: relative;
    width: 100px;
    height: 18px;
    float: right;

    background-image: url('../images/logo_def.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#logo a:hover
{
    background-image: url(../images/logo_h.png);
}
于 2009-09-22T17:23:15.993 回答
1

您已将悬停图像应用于<a>元素。<a>你的内部没有元素div#logo。

于 2009-09-22T17:23:56.843 回答
0

您可以将您的 div 设置为具有锚元素，然后使用a:hover：

<div id="blah">
<p> <a href="#"></a></p>
</div>

然后你的 CSS

#blah a:hover {
 background-image: url(myImage.jpg);
}
于 2009-09-22T17:27:37.157 回答
0

应该注意的是，您不应该将块级元素放在锚点内，锚点是您可以设置为显示块的内联元素。正确的层次结构应该div#footer > a > span#logo与相应的 css 类似。

于 2009-09-23T21:36:36.257 回答
0

使用 onMouseOver 和 onMouseOut javascript函数不是更简单吗？

<script type="text/javascript">
function divcolor(){ document.getElementById('div1').style.background='#FFDFA3'; }
function divcolor2(){ document.getElementById('div1').style.background='#FFFFFF'; }
</script>

<div id="div1" onmouseover="divcolor();" onmouseout="divcolor2();">Hover ME and I will highlight for you :)</div>

我使用了背景颜色，但同样适用于图像。

于 2011-04-12T01:47:07.540 回答