28172 sujets

CSS et mise en forme, CSS3

[résolu] Un a:hover pour textes mais pas pour images

Je n'arrive pas à trouver le bon selector pour limiter l'action de mon a:hover !

Ma demande est simple : <img> descendante d'un <a> ne doit pas subir le a:hover

(plus précis : "un a:hover qui ne fonctionne QUE pour du texte").

<a href="">un lien-texte qui se décale et s'ombre au survol</a>
<a href="">
   <img src="image_qui_ne_doit_pas_se_décaler.jpg">
   <img src="celle_là_non_plus.png">
</a>


a {
	color: #007c85;
	text-decoration: none;
}
a:hover {
	color: #004648; 
	text-shadow:-2px 2px 0px #ddd;
	position:relative;
	right:-2px;
	top:-2px;
}
a > img, a:hover > img{
	position:relative;
	right:0px;
	top:0px;
	text-shadow:0px 0px 0px;
}

Modifié par Gill (15 Aug 2011 - 11:34)
Bonjour Gill,

et coller un ID à ton <a> qui contient du texte? comme en dessous par exemple : 


<a href="" id="decale" >un lien-texte qui se décale et s'ombre au survol</a>




a { 
    color: #007c85; 
    text-decoration: none; 
} 
a:hover#decale { 
    color: #004648;  
    text-shadow:-2px 2px 0px #ddd; 
    position:relative; 
    right:-2px; 
    top:-2px; 
} 
a > img, a:hover > img{ 
    position:relative; 
    right:0px; 
    top:0px; 
    text-shadow:0px 0px 0px; 
}
FloydinBremen a écrit :
et coller un ID à ton &lt;a&gt; qui contient du texte ?

Bonjour FloydinBremen Smiley smile !

Oui, je pourrais créer une classe pour les images cliquables, ce serait plus simple !
<a  class="pas_bouger" href=""> 
   <img src="image_qui_ne_doit_pas_se_décaler.jpg"> 
   <img src="celle_là_non_plus.png"> 
</a> 

a:hover .pas_bouger {  
    text-shadow:0px 0px 0px;  
    position:relative;  
    right:0px;  
    top:0px;  
}
Mais j'aimerais bien pouvoir tester le "Cascading" du CSS qu'on dit si puissant Smiley lol ...
Modifié par Gill (13 Aug 2011 - 18:53)
Un a img:hover suffit, non?
Dans le web si ce n'est pas de l'image, c'est du texte.
Modifié par jmlapam (14 Aug 2011 - 04:28)
jmlapam a écrit :
Un a img:hover suffit, non?
Dans le web si ce n'est pas de l'image, c'est du texte.


Si je puis me permettre, ce serait plutôt a:hover img ^^

Et j'imagine bien quelque chose du genre : 
a:hover { une instruction }
a:hover img { une instruction qui contredit et remplace la première }
AkaiKen a écrit :
Et j'imagine bien quelque chose du genre : 
a:hover { une instruction }
a:hover img { une instruction qui contredit et remplace la première }
Hé bien oui, mais non ! (j'ai même essayé img:hover qui semblerait valide Smiley cligne !)

J'ai l'impression que la pseudo-classe :hover contredit les règles habituelles de surclassage... Rien ne peut l'annuler.
J'ai trouvé !

En fait, j'ai essayé de remplacer mes position:relative par des background-color:#000 et a:hover img marche parfaitement
a:hover img {
   background-color:#000; /* OK pour les seules images */
/*
   position:relative;
   right:0px;
   top:0px;
*/
}
Le problème, c'est le "position:relative". Relative par rapport à quoi ? J'ai essayé de revenir à la situation par défaut : position:static, mais rien ne changeait.

Pourtant, les états "survolé" puis "appuyé" suivantes étaient efficaces (et c'est ce qui me trompait). J'annulais bien l'effet "décalé" lorsque je cliquais :
a:hover {
	color: #004648; 
	text-shadow:-2px 2px 0px #ddd;
	position:relative;
	right:-2px;
	top:-2px;
}
a:active {
	position:relative;
	right:0px;
	top:0px;
	text-shadow:0px 0px 0px;
}
Alors ?
Alors, je n'ai toujours pas compris pourquoi ça marche avec le a:active, mais pour les images, il faut définir le "relative" dans l'autre sens ("relative par rapport à l'état "survolé") :
a:hover img {
	position:relative;
	right:+2px;
	top:+2px;
}


Donc, le problème n'était pas que a:hover img ne marchait pas mais que la position relative à zéro n'inverse pas le relative précédent !

Donc voilà mon code complet :
a {
	color: #007c85;
	text-decoration: none;
}
a:hover {
	color: #004648; 
	text-shadow:-2px 2px 0px #ddd;
	position:relative;
	right:-2px;
	top:-2px;
}
a:hover img { /* les images cliquables ne doivent pas bouger */
	position:relative;
	right:+2px;
	top:+2px;
}
a:active {
	position:static;
}
a:active img {/* sinon les images "s'enfoncent" lorsqu'on les clique */
	position:static;
}

Astuce :
img:hover { /* marche pour TOUTES les images, même celles qui ne sont pas sous un <a>. On peut faire un effet hover pour n'importe quel tag sans lien */
	position:relative;
	right:+2px;
	top:+2px;
}

Modifié par Gill (15 Aug 2011 - 11:59)
Sujet clos
Aller à