:hover qui agit sur plusieurs éléments

Version imprimable

Bonjour

je souhaite quand la souris passe sur un element changer des propriétés de celui ci, mais également d'autres éléments de la page.
Code:

1 2 3 4 5 6 <div id="repons1-1"><div id="repons1-2">réponse1</div></div> <div id="repons2">réponse2</div> <div id="repons3-1"><div id="repons3-2">réponse3</div> <a href="#"><div id="bi">1</div></a> </div> </div>
lorsque je fait un hover sur la div bi je souhaite que les div repons1-1 et 1-2 réagisse aussi a cet hover en affichant une ombre portée.
donc dans la feuille de style je fait
Code:

1 2 #bi:hover{ }
Donc pour le#bi pas de soucis, mais est il possible de définir de propriétés pour l'id reponse1-1 ET 1-2 avec le bi:hover.
N'y aurait pas quelque chose à faire en utilisant la pseudo class :child si je modifie mon code Html

13/07/2014, 23h45
darkstar123456
Bonsoir,

Trop d'ID tue l'ID !
Avez-vous réellement besoin de tous ces ID ? J'en doute fortement...

Pour répondre à votre question, utilisez simplement une classe.

Exemple :
Code:

1 2 3 .shadowbox:hover { box-shadow: 10px 10px 5px #888; }
Il suffit alors de simplement mettre la classe partout là où vous souhaitez que l'effet se produise :

Code:

<div class="shadowbox">Contenu #1</div><a href="#" class="shadowbox">effet sur un lien</a>

Vous pouvez aussi choisir de sélectionner plusieurs éléments (en les séparant par une virgule) pour de même attributs CSS :
Code:

1 2 3 4 5 #repons3-1:hover, #repons3-2:hover, .shadowbox:hover { box-shadow: 10px 10px 5px #888; }

Il me semble que les sélecteurs ascendants ne sont pas encore supportés en CSS. Ainsi, dans l'exemple suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html> <html dir="ltr" lang="fr-FR"> <head> <meta charset="UTF-8" /> <title>Sélecteurs frères</title> <style type="text/css"> div { margin: 1ex; border: thin solid black; } div:hover, div:hover ~ div { background: gray; } </style> </head> <body> <div>A</div> <div>B</div> <div>C</div> </div> </body> </html>
survoler la boîte A fera un effet sur A, B et C ;
survoler la boîte B fera un effet sur B et C ;
survoler la boîte C ne fera d'effet que sur C.

Citation:

N'y aurait pas quelque chose à faire en utilisant la pseudo class :child

Non, puisque #BI n'est pas le père des éléments à cibler.

14/07/2014, 08h53
NoSmoking

Bonjour,

Citation:

Non, puisque #BI n'est pas le père des éléments à cibler.

un peu de patience, en attendant le CSS4
:fleche: Cibler les éléments parents (en CSS !)
:fleche: Determining the Subject of a Selector

merci pour les infos j'ai un peu modifié mes div pour pouvoir utiliser pseudo class "frères" avec ~
ça fonctionne a peu près mais suivant les navigateurs je n'ai pas tout à fait le même effet.
je fais un effet perspective ce qui explique le nombre de DIV, puisqu'il faut 2 éléments superposé pour faire cet effet.
lorsque je fais le hover je veux que cet effet disparaisse ça fonctionne sou chrome et safari sans souci, ça ne marche pas sous Firefox, la perspective reste, et sous opera la perspective ne fonctionne simplement pas.
J'ai essayé de remettre les préfixes moz o mais pas de changement si vous avez une idée.
Code:

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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 #cadre1{ position: relative; height: 79%; float:left; top:10%; left:3%; width: 30%; } #repons1-1 { min-height:40%; -webkit-perspective: 500px; perspective: 500px; /* border:rgba(255,255,255,1) solid 2px; */} #repons1-2 { position: relative; z-index:10; width:100%; height:100%; font-weight: bold; background-color: rgba(204,204,204,1); border-radius: 10PX; -webkit-transform: rotateY(7deg); transform: rotateY(7deg); } #buzzer1{ position:absolute; z-index:20; bottom:5%; left:2%; width:50%; } #buzzer1:hover{ background-color: rgba(255,255,255,1); } #cadre1 a:hover~.modif{ transition:all; transition-duration:0.2s; background-color: rgba(204,204,204,1); -webkit-perspective: 0px; perspective: 0px; transform: rotateY(0deg); color:rgba(0,51,204,1); }
Code:

1 2 3 4 5 6 7 <div id="cadre1"><a href="#"> <div id="buzzer1"><img src="../images/buzzer.svg" ></div></a> </a> <div id="repons1-1" class="modif"> <div id="repons1-2" class="modif">réponse1</div> </div> </div>

16/07/2014, 16h16
rvm31

pour firefox j'ai trouvé au lieu d'appliquer une perspective 0 j'affiche une perspective none.
Sous firefox Windows la perspective est très moche, aliasing. sous chrome ou firefox Mac je n'ai pas cette dégradation.
et Opéra ne semble pas supporter perspective.
16/07/2014, 16h26
Bovino

Citation:

Opéra ne semble pas supporter perspective

Tu as quelle version d'Opera ? :?