[CSS 3] Event et action sur classe distante [Résolu]

[papaye0]

Bonjour a tous, je voudrais savoir si il est possible avec css3 de modifier un:hover sur une autre classe

ex:
on a un hover sur la classe tata et ce qui va entrainer une modification de titi

Code :

1
2
3
4
5
6
7
 
<div class="toto">
<div class="tata">
</div>
<div class="titi">
</div>
</div>

Car avec les transition du CSS3, ça pourrait éviter bcp de JS...

Merci pour les infos, a bientôt.

[ornitho13]

En CSS2, il existe le selecteur "+".
Par exemple E+F correspond à tout élément F immédiatement précédé par un élément E.

A partir de là, un :hover de "tata" modifiant "titi" se traduirait par :

Code css :

1
2
3
4
 
.tata:hover+.titi{
   ...
}

Exemple pour ta structure HTML (avec transition) :

Code css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.titi, .tata{
	width:100px;
	height:20px;
	margin:10px;
	background:#999;
	-webkit-transition:all 0.6s ease-in;
	-moz-transition:all 0.6s ease-in;
	-o-transition:all 0.6s ease-in;
	transition:all 0.6s ease-in;
}
.tata:hover+.titi{
	background:#069;
}

[papaye0]

merci ca marche très bien, mais en réalité j'ai confondu avec un autre code ce que je cherche précisément donne ça :

Code :

1
2
3
4
5
6
7
8
9
 
<div id="nav">
<div class="toto" id="1">blablabla<div>
<div class="toto" id="2">blablabla<div>
<div class="toto" id="3">blablabla<div>
<div class="toto" id="4">blablabla<div>
<div class="toto" id="5">blablabla<div>
<div class="toto" id="6">blablabla<div>
</div>

lors d'un hover tout les autres passe en opacity 0, mais si je passe sur #1, #2 reste en opacity 1 comme #1

et je ne vois pas trop comment faire proprement

EDIT :
Quel idiot, ce doit étre la fatigue ....

Code :

1
2
3
4
5
6
div#nav:hover div {
  color: rgba(0, 0, 0, 0.5)
}
div#nav:hover div:hover, nav:hover div:hover+#2 {
  color: rgba(0, 0, 0, 1)
}

le seul problème qu'il reste .... est de garder #1 avec 1 en opacity color lors du survol de la div#2 et la ... je bloque !

[ornitho13]

Tu n'es pas loin de la solution.
Le problème vient de tes instructions CSS. Il y a 2 fois des hovers un peu partout.

De plus il y a des erreurs dans ton code HTML (pas de balise fermante sur les div à l'intérieur de #nav)

Essaye ceci:

Code html :

1
2
3
4
5
6
7
8
9
 
<div id="nav">
	<div class="toto" id="1">blablabla</div>
	<div class="toto" id="2">blablabla</div>
	<div class="toto" id="3">blablabla</div>
	<div class="toto" id="4">blablabla</div>
	<div class="toto" id="5">blablabla</div>
	<div class="toto" id="6">blablabla</div>
</div>

Code css :

1
2
3
4
 
#nav div:hover+div {
	color: rgba(0, 0, 0, 0.5);
}

Un autre conseil, évite de commencer le nom de tes ID par un chiffre, ce n'est pas valide W3C.

[papaye0]

je m'exprimais mal
mais au final j'ai trouvé, avec l'aide de css3 (merci au infini pages du w3c ...)