Hover <a> dans <td> modifier <td> image d'arrière-plan
Je veux changer le fond de la <TD>
lorsque l'utilisateur survole un lien <a>
dans le <td>
Partie de mon code HTML:
<tr class="menuBarBottomSelected">
<td width="20%">
<a class="menuBarBottomUnselected" href="./url.php">Getting Started</a>
</td>
</tr>
C'est mon css:
.menuBarBottomSelected{
background-image: url('/auth/radius/submenu_bg.jpg');
background-repeat: repeat-x;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #ffffff;
border-top:#666666 solid 1px;
}
tr.menuBarBottomUnselected td a:hover{
color:black;
background-image: url('/auth/radius/submenu_bg_hover.jpg');
background-repeat: repeat-x;}
Le code html est généré si je ne suis pas sûr pourquoi ils utilisent la même classe pour le lien et le td. J'ai été en mesure d'attribuer un :hover sur le lien, mais uniquement l'arrière-plan du texte n'a pas bougé du tout <td>
Vous devez vous connecter pour publier un commentaire.
Vous devez afficher le lien comme un bloc, et de définir la largeur et la hauteur à 100%; cela permettra de combler vos td avec le point d'ancrage de l'élément et de chaque pixel de la td sera agir comme un lien(vous pouvez cliquer dessus). Si c'est bien, alors voici la solution:
Oeil à l'exemple ici: http://jsfiddle.net/mohsen/LnabQ/
Cela fonctionne dans n'importe quel navigateur
Mais si vous ne voulez pas remplir votre td avec la balise d'ancrage, alors vous devez utiliser JavaScript d'ajouter et de supprimer des classes à la
td
. à ma connaissance, vous ne pouvez pas avoirtd:hover
Une façon de le faire est avec un événement. Attribuer
onmouseover
sur le<a>
balise pour appeler une fonction qui modifie le fond pour le parent<td>
.Note de côté: Dans le futur, un excellent moyen de le faire avec CSS serait :parent sélecteur, ce qui, malheureusement, il n'existe actuellement pas.
EDIT: Si vous êtes certain que le
<td>
ne contient que la balise d'ancrage, vous pourriez juste faire le :hover s'appliquent à la<td>
. Puis, changeant de milieux n'est pas un problème.et...
:hover
sur le<a>
tag. Voir mon edit.href
?ne pourriez-vous modifier l'arrière-plan de l'un, comme ça?