28220 sujets

CSS et mise en forme, CSS3

[Résolu] Img Focus

Bonjour,
Certains liens de ma page on un style différent lorsque l'on clique dessus.


#left a:focus {background-color: #E3FFE3;border-top:1px solid #41cc41;border-bottom:1px solid #41cc41;color:#32b432;}


J'aimerais que cette effet ne s'applique pas au images, j'ai donc essayer comme ceci :

img a:focus {border-top:0px ;border-bottom:0px }

[b] ou [/b]

img #left a:focus {border-top:0px ;border-bottom:0px }


Mais rien ne marche, je me sers de img {border:none;}, ça marche niquel.
Et donc je fais appel à votre aide, pour savoir comment désactiver le focus uniquement sur les img =D

Je pourais faire une une div, et ne pas mettre cet effect de focus ... Mais bon ca serait du bricolage =/
Modifié par Bleeps (20 Feb 2006 - 20:22)
dans le principe de la cascade l'identifiant l'emporte sur tout. Donc c'est sans doute :


#left img a:focus {

}


<edit>
suis allé un peu vite, ça peut pas coller comme ça.

donc le mieu je pense c'est faire une classe "contient_image" et 

#left a.contient_image:focus {

}

</edit>
Modifié par clb56 (19 Feb 2006 - 11:57)
Ouèp ça rejoins l'idée de class / div à faire ...
Mais n' y aurais t'il pas une méthode bien plus simple ?
clb56 a écrit :
dans le principe de la cascade l'identifiant l'emporte sur tout. Donc c'est sans doute :


#left img a:focus {

}


<edit>
suis allé un peu vite, ça peut pas coller comme ça.

donc le mieu je pense c'est faire une classe "contient_image" et 

#left a.contient_image:focus {

}

</edit>


Si le code HTML fait
<div id="left">
	<a><span>Texte</span></a>
	<a><img /></a>
	<a><img /></a>
</div>

Il suffit alors de faire :
#left a span {
	background-color: #E3FFE3;
	border-top:1px solid #41cc41;
	border-bottom:1px solid #41cc41;
	color:#32b432;
}
#left a img {
	border: 0;
}


Et le tour est joué. Par contre si on a passé les propriétés directement à #left a (donc aux éléments a plutôt qu'au contenu de ces éléments), on ne peut pas revenir en arrière en demandant aux CSS de prendre en compte les éléments enfant (contenus à l'intérieur de) des éléments a. Les sélecteurs CSS permettent d'identifier un élément en fonction de ses ancêtres dans le flux, mais pas de ces enfants (sinon quel bordel ça serait à implémenter dans les navigateurs !)...
J'ai adopté la technique de CL56, qui rejoins mon idée de base.

Mon code : 


#left .image a:focus {background-color:transparent;border-top:none;border-bottom:none;}


Ca marche niquel, mais existe t'il une autre solution plus "radicale", qui n'a pas besoins ded'ajouter une class dans l'html quand il le faut ?

Je vous écoutes sur cette avis !
Sujet clos
Aller à