28172 sujets

CSS et mise en forme, CSS3

[Résolu] Suppression d'un filtre au survol de la souris

Bonjour !

Petite question qui va paraître simple aux spécialistes, mais je n'ai pas (encore) trouvé la solution...

Dans une <div>, j'affiche quelques photos volontairement "grisées" au moyen d'un filtre. Ces photos sont des liens, et je voudrais, quand la souris passe dessus, annuler l'effet filtre.
Je pensais mettre un peu de CSS pour ça, mais je ne trouve pas l'astuce adeqate.
Faut-il mettre un 
a:hover { quelque chose }

ou un
img:hover { quelque chose }

Je ne suis pas assez familier pour trouver...
Merci d'avance !
Modifié par Paps (09 May 2010 - 23:18)
Bonsoir.
Si tes photos sont des balises <img /> alors tu ne peux pas modifier l'image affichée.
Modifié par phpdoesnotcare (06 May 2010 - 23:23)
Bonsoir,

En fait, avec CSS, il est tout à fait possible de remplacer une image en "dur" par une autre image en "dur". J'entends par là des images inscrites dans le HTML et non dans le CSS. Il suffit de voir ma petite expérience ici : images jouant à cache-cache. Voyez le code, désactivez les CSS etc… Amusez vous.

Ce principe ne fonctionne pas bien pour une image au seing même d'un texte courant, mais est bon dans le cas d'une liste ou d'un titre. Smiley cligne
Modifié par Aureance (07 May 2010 - 01:20)
Ce n'est pas vraiment le CSS qui modifie l'image : il ne fait que masquer une image pour en laisser apparaître une autre. Enfin ça n'est pas la même image, quoi... Smiley sourire

M'enfin j'imagine que ça irait parfaitement pour le problème posé ici. Smiley cligne
bonsoir,

sinon via CSS , il ya background et opacity qui peuvent donner un effet de surbrillance.

a img {opacity:0.85;background:#000;}
a:hover img {opacity:1;}


(pour IE voir le filtre adequat : filter:alpha(opacity=85); et 100 = 1 )

En jouant du filtre et d'une couleur de fond (ou d'une image avec un effet de degradé comme background) tu peut obtenir des effets interessant sans tomber dans le kitch .

GC
Bonjour et merci à tous, notamment à gc-nomade, qui m'a donné la solution adequate (je ne dis pas que c'est la seule, mais elle me convient parfaitement).
J'ai donc écrit :
div#photos 
a  {background:#fff}
a img  {opacity:0.3;} 
a:hover img {opacity:1);}

et ça marche très bien sous Firefox, mais pas sous IE.
J'ai aussi essayé :
div#photos
a {background:#fff}
a img  {filter:alpha(opacity=30);} 
a:hover img {filter:alpha(opacity=100);}

Très bien sous IE, mais pas sous Firefox.

Dilemme : comment faire pour avoir une page fonctionnant dans les deux environnements ?
J'ai osé - est-ce aberrant, scandaleux, illogique, ou autre ? - écrire simplement:

div#photos 
a {background:#fff}
a img {filter:alpha(opacity=30);} 
a:hover img {filter:alpha(opacity=100);}
a img {opacity:0.3;} 
a:hover img {opacity:1);}


et ça marche dans les deux navigateurs, chacun prenant sa part et ignorant le reste !
Mystère insondable de la compatibilité...
Mon problème est résolu, merci à tout le monde.

Paps

PS: je n'ai pas trouvé, dans le forum, comment on pouvait déclarer un problème "résolu" (discussion close)...
Paps a écrit :
J'ai osé - est-ce aberrant, scandaleux, illogique, ou autre ? - écrire simplement:
et ça marche dans les deux navigateurs, chacun prenant sa part et ignorant le reste !
Mystère insondable de la compatibilité...
Les propriétés filter sont propres aux navigateurs de Microsoft. Le comportement que tu décris est donc tout à fait normal. Néanmoins, il est préférable d'utiliser les commentaires conditionnels afin de ne cibler qu'Internet Explorer. .
Paps a écrit :

PS: je n'ai pas trouvé, dans le forum, comment on pouvait déclarer un problème "résolu" (discussion close)...
En éditant simplement le titre de ton premier post, afin de lui ajouter un élégant [Résolu].
Avant de marquer ce sujet comme résolu, je dois dire honnêtemnt qu'après quelques menus déboires et nouvelle consultation du forum, j'ai modifié mes lignes comme suit :
div#box_4
a {background:#fff}
a img       {-moz-opacity:0.3; opacity:0.3;filter:alpha(opacity=30);} 
a:hover img {-moz-opacity:1); opacity:1; filter:alpha(opacity=100);}

et tout va bien sous IE et sous FF !

Prochaine étape, voir ce que sont les "commentaires conditionnels" (entre autres...).
Quel boulot...
Paps a écrit :
Prochaine étape, voir ce que sont les "commentaires conditionnels" (entre autres...).
Ca va aller : il faut 5 secondes pour comprendre, et 3 de plus pour apprendre. Smiley cligne
Sujet clos
Aller à