html, div, css - hover action and background image changing

Question

Hi, I have such code:

<div id="footer">
   <a href="http:/tra-ta-ta.com">
      <div id="logo"></div>
   </a>
</div>

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

Answer 1

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

Answer 2

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)

Answer 3

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

Answer 4

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

Then your CSS

blah a:hover {

background-image: url(myImage.jpg); }

Answer 5

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.