28172 sujets

CSS et mise en forme, CSS3

[Résolu] Selection frères de <li>

Bonsoir,

Je viens solliciter votre aide pour un problème dont je n'ai point trouvé la solution sur Internet après de nombreuses recherches !
Le problème est le suivant : j'aimerais que lorsque je survol un élément <li> de mon menu, tous les éléments frères à celui-ci aient l'opacité qui baisse. Je sais qu'il faut utiliser "hover" et "focus", mais je ne trouve pas comment sélectionner tous les éléments <li> du menu et non pas seulement ceux qui précèdent.
Pour vous donner un exemple de ce que je veux faire : https://www.borngroup.com/

Merci d'avance pour votre aide Smiley cligne

Cordialement,

Flox'
Modifié par flox (22 Oct 2016 - 02:19)
Hello,

cette solution semble fonctionner correctement :


ul {
	background:#000;
	color:#ccc;
	transition: 0.7s ease;
}
li {display:inline-block;padding:30px;}
ul:hover {color:#888;}
li:hover {color:#ccc;}


Couleurs et temps de transition approximatifs...
On change la couleur de <ul> au survol, tout en rétablissant la couleur d'origine au survol du <li>

Sans aucune garantie ...
Merci à vous deux pour votre aide.

@farang, ta méthode ne marche malheureusement pas.
@allan00958, ça marche parfaitement !
Bonjour,

Je me permet de relancer le sujet car je rencontre un problème suite à l'utilisation de : 

"x":hover ."y":not(:hover){
  opacity: n;
}


J'ai utilisé cette méthode dans une div où j'ai 15 photos. Cependant, lorsque je survol une des 15 photos, les autres photos ont bien l'opacité qui diminue à "n" mais se mettent à empiéter sur mon menu horizontale placé en haut de ma page en "position: fixed".

J'ai essayé d'utiliser "Overflow: hidden;" mais cela ne marche pas.
Que faire ?

Merci d'avance pour votre aide,

Cdl.
Modérateur
il n'y a pas vraiment lieu de se servir de :not() ; ou de jQuery Smiley smile

exemple avec une base avec de simple selecteur tel que :

nav:hover a {
  opacity:0.5
}
nav a:hover {
  opacity:1;
}


Pour retrouver l'effet de l'exemple citer, on ajoute une transition, un pointer-events pour contenir l'effet qu'au survol d'un lien et le css de base (color, background,text-align). Ce qui donne http://codepen.io/gc-nomade/pen/rMXQga .

Javascript peut-être nécessaire pour les très vieux navigateur Smiley cligne
gcyrillus a écrit :
il n'y a pas vraiment lieu de se servir de :not() ; ou de jQuery Smiley smile

exemple avec une base avec de simple selecteur tel que :

nav:hover a {
  opacity:0.5
}
nav a:hover {
  opacity:1;
}


Pour retrouver l'effet de l'exemple citer, on ajoute une transition, un pointer-events pour contenir l'effet qu'au survol d'un lien et le css de base (color, background,text-align). Ce qui donne http://codepen.io/gc-nomade/pen/rMXQga .

Javascript peut-être nécessaire pour les très vieux navigateur Smiley cligne


Bon à sa voir ça, merci bien Smiley cligne

J'en profite pour dire que j'ai trouvé comment résoudre mon problème du post précédent : il suffisait d'utiliser z-index Smiley cligne
Sujet clos
Aller à