28173 sujets

CSS et mise en forme, CSS3

Voila je débute en css et teste les liens sur image :

a img {
border: thin solid #990000;
}

cela fonctionne bien par contre je n'ai pas trouvé pour donner un attribut différent lors d'un hover sur ces même images.
Alors si quelqu'un peut m'aider.Merci par avance.

nini Smiley cligne
Modifié par nini (11 Aug 2007 - 12:58)
Pour le survol (souris) et le focus (navigation au clavier):
a:hover img, a:focus img, a:active img {
	border-color: #ff0000;
}

par exemple.
Bonjour aussi...

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif

Concernant ta question,

Il te suffit de sélectionner la pseudo classe hover sur ton lien, de la manière suivante, et de changer les propriétés qui t'intéressent :

a[b]:hover[/b] img {
border: 4px solid #red;
}
nini a écrit :
Par contre le hover ne fonctionne pas sous IE6 ?

Il fonctionne pour les liens. Mais peut-être qu'appliquer un style spécifique à une image dans un lien en :hover, ça dépasse ses capacités...

Auquel cas, les solutions:
- faire la bordure avec le lien directement, et ne pas mettre de bordure à l'image;
- utiliser Javascript pour l'effet au survol.

La première solution est plus légère à mettre en place. Elle peut demander de passer par un sélecteur un peu spécifique, par exemple en donnant une classe particulière à tous les liens qui englobent une image et pour lesquels on souhaite cet effet.
Salut nini Smiley cligne ,

il existe effectivement une solution (trouvée grâce à ce sujet). C'est un peu tordu car il te faudra utiliser un fichier HTC récupérable à cette adresse.

Pour un exemple en ligne : c'est ici (faire "Afficher la source")...

A+

*Edit: c'est vrai que la première solution est plus standard que le htc Smiley langue
Modifié par Heyoan (11 Aug 2007 - 12:54)