Discussion :

[Mister Paul]

Bonjour,

j'ai une série de petites images qui appartiennent à la class "peinture".
Je voudrais tous les éteindre un peu (opacité: .4) sauf celui sur lequel se passe le rollover.
Et je ne vois pas comment faire...

J'ai bien pensé à :not(:hover) et :hover, mais au moment du :hover je ne sais pas comment déclencher le not(:hover).

On est obligé de passer par du javascript ?
Rien de possible directement en CSS ?

Merci
Paul

[J_Lennon]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.peinture {
    -moz-opacity: 0.40;
    -khtml-opacity: 0.40;
    opacity: 0.40;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=40);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    filter:alpha(opacity=40);
}
 
.peinture:hover {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter:alpha(opacity=100);
}

[Mister Paul]

Je me trompe peut-être mais ce que tu m'indiques-là c'est de faire ressortir l'élément la class peinture sur lequel il y a un rollover.
Ce que je cherche c'est à éteindre tous ceux qui ne sont pas concernés par le rollover…

[J_Lennon]

oh pardon effectivement, j'navais pas compris ta requête...

il y a ce que tu veux ici:
http://www.css3create.com/Effets-de-...et-filtres-CSS

[Mister Paul]

éteindre un peu c'est (pour moi…) passer d'une opacité 1 à une opacité: .4

[J_Lennon]

post précédent corrigé, j'ai compris après coup... après faut adapter un peu.

css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
ul li{
	list-style:none;
}
 
ul .peinture{
	width: 150px;
	height: 100px;
	box-shadow:0 0 3px black;
	-moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter:alpha(opacity=100);
}
 
ul li:hover .peinture{
	-moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter:alpha(opacity=100);
}
 
ul:hover li:not(:hover) .peinture{
	-moz-opacity: 0.40;
    -khtml-opacity: 0.40;
    opacity: 0.40;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=40);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    filter:alpha(opacity=40);
}

html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<ul>
        <li><img src="img1.jpg" class="peinture" /></li>
        <li><img src="img2.jpg" class="peinture" /></li>
        <li><img src="img3.jpg" class="peinture" /></li>
        <li><img src="img4.jpg" class="peinture" /></li>
    </ul>

ça, ça fonctionne!