html, div, css - hover action and background image

问题:

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

It works, but bg-image doesn't change when mouse is over it, why?

回答1:

Well, the immediate problem is that there's no <a> element inside #logo. Changing your second rule to target the correct element will "fix" this problem:

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

Edit:
As was pointed out in the comments:

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.

This is indeed the better fix for your problem, as it will reduce clutter and help prevent further headaches in the future. (thanks to @Julian for the clarification)

回答2:

The background-image is originally assigned to #logo. On a:hover the ANCHOR'S background-image is changed. Thus the following would work:

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

回答3:

You've applied the hover image to an <a> element. There is no <a> element in your inside your div#logo.

回答4:

It should be noted that you shouldn't put block level elements inside an anchor, which is an inline element that you can set to display block. The correct hierarchy should be something like div#footer > a > span#logo with the corresponding css.

回答5:

Wouldn't it be simpler to use onMouseOver and onMouseOut javascript functions?

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

I used background colors, but the same should work with images.

回答6:

You could style your div to have an anchor element and then use a:hover:

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

Then your CSS

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