html、div、css - 悬停 Action 和背景图像更改

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

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

The style of the first rule should be applied to the A element and the #logo DIV should be removed since it serves no purpose whatsoever.

这确实是解决您的问题的更好方法，因为它会减少困惑并有助于防止将来出现更多令人头疼的问题。 (感谢@Julian 的澄清)