Question sélecteur CSS

Bonjour à tous,

Dans le but de faire un menu de galerie, je recherche un sélecteur qui me permettent de sélectionner, au :hover, tous les frères, sauf celui survolé ! Ceci dans le but de jouer sur l'opacité des éléments non mis en avant.

Niveau HTML j'ai un simple :

<ul>
<li></li>
<li></li>
etc...
</ul>

Niveau CSS, j'ai bien essayé ça, mais il en résulte, que seul ceux, après celui survolé sont atteint !

li{
opacité :1;
}
li:hover ~ li{
opacité : 0.1;
}

Comment faire pour que tous soient atteints, y compris ceux qui précèdent mon li survolé ?

Merci d'avance à vous
Modifié par rupileos (21 Sep 2012 - 13:15)

Bonjour,

Un truc du genre :

ul li {
opacity: 1;
}
ul:hover li {
opacity: 0.1;
}
ul:hover li:hover {
opacity: 1;
}

Bonjour,

En effet c'est le résultat que je recherche, seulement, au survol d'une marge de mon ul mes li passait en mode hover.

Une soluc pour évité ça ?
Modifié par rupileos (21 Sep 2012 - 15:40)

Salut,


Il y a quoi dans tes balise <li> ? Juste du texte ou une autre balise ?

_laurent a écrit :
Salut,


Il y a quoi dans tes balise &lt;li&gt; ? Juste du texte ou une autre balise ?

Salut,
Voici, le contenu exacte de ma balise li !

<li>
<a href="">
<img src=""/>
<h3>titre</h3>
</a>
</li>

Modifié par rupileos (21 Sep 2012 - 15:46)

tu devrais passer par jquery...

quand un li est survolé, tu les mets tous en opacité réduite et tu mets celui survolé en opacité normale, ou autre..

lionel_css3 a écrit :
tu devrais passer par jquery...quand un li est survolé, tu les mets tous en opacité réduite et tu mets celui survolé en opacité normale, ou autre..

+1, utilisez du JavaScript (il n'est peut-être pas utile de faire appel à Jquery (ou autre librairie) uniquement pour ce type d'effet)

Re,

Sinon, il y a éventuellement la pseudo-class de négation :

selector:not(){ properties }

ce qui pourrait donner pour ton besoin :

ul li:hover {
opacity:1;
}
ul:hover li:not(:hover) {
opacity:0.1;
}

De mémoire, cela ne fonctionne pas pour Internet Explorer au moins jusqu'à sa version 8... à voir

rupileos a écrit :
seulement, au survol d'une marge de mon ul mes li passait en mode hover.
Une soluc pour évité ça ?

Bah tu mets pas de marge à ton UL (et c'est pas au survol d'une marge que l'état :hover est actif, ça peut être au survol d'une bordure ou d'un padding... donc pas de bordure ou de padding).

6l20 a écrit :
+1, utilisez du JavaScript

Je vois pas l'intérêt ici, pour un effet visuel, alors que la solution de thierry marche très bien (testé à l'instant, certes pas sur tous les navigateurs mais bon c'est assez basique). JavaScript sera éventuellement utile pour reproduire cet effet au focus (en l'absence de sélecteur du type «tous les éléments frères de x:focus»).

fvsch a écrit :

Je vois pas l'intérêt ici, pour un effet visuel, alors que la solution de thierry marche très bien (testé à l'instant, certes pas sur tous les navigateurs mais bon c'est assez basique). JavaScript sera éventuellement utile pour reproduire cet effet au focus (en l'absence de sélecteur du type «tous les éléments frères de x:focus»).

C'est pas faux.
Je pensais effectivement aux navigateurs qui ne comprennent pas ou mal l'instruction CSS, au fait que quelques lignes de JavaScript peuvent résoudre ce petit souci d'interopérabilité, et que, de plus en plus de site charge déjà au moins une ou plusieurs librairies JavaScript (ce qui facilite les choses).
Si on ajoute en plus quelques potentiels soucis d'accessibilité, pourquoi se priver ?

Bon, il est vrai que l'on ne parle que d'un effet visuel, que l'on peut se moquer des vieux navigateurs, et de toute façon, j'aime bien la pseudo-classe de négation.

Merci à tous

Je regarde ça en détail !

Je pensais effectivement au Jquery, mais pense qu'il est plus léger de le faire en CSS !

Merci à vous en tout cas
Modifié par rupileos (24 Sep 2012 - 09:11)