Sprites CSS et surlignage - possible d'appliquer la propriété "hover" à plusieurs éléments à la fois?

Question

J'ai deux images d'image-objet. Une image contient le corps d'un bouton arrondi ainsi que d'autres états (planer, cliqué, ect) tandis que l'autre contient la courbe la plus à gauche de l'image. Je les utilise pour que je n'aie pas besoin d'avoir plusieurs images de bouton sur ma page Web, ces boutons peuvent être mis à l'échelle à n'importe quelle taille.

<div id="search_tips"><span>Search Tips</span></div> 

et CSS

#advanced_search_button, #search_tips{ 
    background: url("graphics/doc_button_left.png") no-repeat scroll 0 0 transparent !important; 
    color:#666666 !important; 
    display:block !important; 
    float: right !important; 
    padding-left: 5px; 
    padding-right: 6px; 
    padding-top: 0px; 
    margin-right: 16px; 
    height: 22px; 
    overflow: hidden !important; 
} 


#advanced_search_button span, #search_tips span{ 
background: url("graphics/doc_button.png") no-repeat scroll 100% 0 transparent !important; 
padding: 2px 9px 5px 0 !important; 
line-height: 19px; 
display:block !important; 
float: left; 

} 



#search_tips:hover, #advanced_search_button:hover { 
    background-position: 0 -22px !important; 
} 

#search_tips span:hover, #advanced_search_button span:hover{ 
    background-position: 100% -22px !important; 
} 

Quand je passe la souris sur la partie de la div qui contient le (la majorité de l'icône) puis les deux parties de mon sprite ont le style « hover » appliqué à il. Cependant, si je survole la partie de l'image avant le "Je vois seulement un mandrin de l'image, on lui applique le style" hover "

Ce que je voudrais pouvoir faire est d'activer le" ". vol stationnaire de style » pour la durée chaque fois que le div parent a son style de vol stationnaire appliquée.

Un conseil?

Merci

Answer 1

Avez-vous essayé #search_tips:hover span?

Answer 2

pas 100% sûr si elle répond votre question, mais :hover peut être un sélecteur de parent aussi:

#search_tips:hover span.classname1 
    { 
    ...... 
    } 

#search_tips:hover span.classname1 
    { 
    ....... 
    } 

ces règles les deux appliquent le moment search_tips est plané au-dessus.

Answer 3

Pour commencer, lorsque vous survolez un élément, seul cet élément reçoit l'événement hover css, et non rien derrière lui. Toutefois, vous pouvez masquer l'élément sur le vol stationnaire, ce qui déclenche le survol de l'élément derrière lui.

Answer 4

Assurez-vous que vous utilisez le :hover pseudo-classe avant l'élément span pour faire le travail correctement en vol stationnaire:

#search_tips:hover span, #advanced_search_button:hover span 

Je pense aussi que vous aurez besoin d'utiliser votre doc_button_left.png comme l'arrière-plan de la span si vous utilisez la technique des portes coulissantes standard. Je ne suis pas sûr à 100% à ce sujet, mais si vous continuez à avoir des problèmes, vous voudrez peut-être faire ce changement.