html, div, css - action vol stationnaire et de l'image d'arrière-plan changeant

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

Il fonctionne, mais bg-image ne change pas lorsque la souris est dessus, pourquoi?

Answer 1

Eh bien, le problème immédiat est qu'il n'y a aucun élément à l'intérieur <a>#logo. Changer votre deuxième règle pour cibler l'élément correct « corriger » ce problème:

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

Edit:
Comme il a été souligné dans les commentaires:

Le style de la première règle devrait être appliqué à l'élément A et le #logo DIV doit être supprimé car il sert aucun but que ce soit.

Ceci est en effet la meilleure solution pour votre problème, car il permettra de réduire l'encombrement et de prévenir d'autres maux de tête à l'avenir. (grâce à @Julian pour la clarification)

Answer 2

L'image d'arrière-plan est à l'origine affectée à #logo. Sur un vol stationnaire, l'image de fond de l'ANCRE est changée. Ainsi, les éléments suivants fonctionnerait:

#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

Vous avez appliqué l'image de survol à un élément <a>. Il n'y a pas <a> élément dans votre intérieur votre div#logo.

Answer 4

Vous pouvez le style de votre div avoir un élément d'ancrage, puis utiliser a:hover:

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

Ensuite, votre CSS

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

Answer 5

Il convient de noter que vous ne devriez pas mettre des éléments de niveau de bloc à l'intérieur une ancre, qui est un élément en ligne que vous pouvez définir pour afficher le bloc. La hiérarchie correcte devrait être quelque chose comme div#footer > a > span#logo avec le css correspondant.

Answer 6

Ne serait-il pas plus simple d'utiliser les fonctions javascript onMouseOver et onMouseOut?

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

J'ai utilisé des couleurs de fond, mais la même chose devrait fonctionner avec les images.