Question

#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不会改变，为什么？

Answer 1

嗯，直接的问题是<a>内没有#logo个元素。更改第二条规则以定位正确的元素将“解决”此问题：

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

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

第一条规则的风格应该是应用于A元素和#logo DIV应该被删除，因为它服务没有任何目的。

这确实是解决问题的最佳方法，因为它可以减少混乱并有助于防止将来出现进一步的麻烦。（感谢@Julian的澄清）

Answer 2

背景图像最初分配给#logo。在a：悬停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);
}

Answer 3

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

Answer 4

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

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

然后你的CSS

#blah a:hover {
 background-image: url(myImage.jpg);
}

Answer 5

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

Answer 6

使用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>

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

html，div，css - 悬停动作和背景图像更改

6 个答案: