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

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

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