:hover qui agit sur plusieurs éléments

**rvm31** · 13/07/2014, 22h40

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 html :

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

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 :

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

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

**darkstar123456** · 13/07/2014, 23h45

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 css :

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

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 html :

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

<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 css :

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

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

**Muchos** · 14/07/2014, 01h03

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

Code html :

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
<!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.

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.

**NoSmoking** · 14/07/2014, 08h53

Bonjour,

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

un peu de patience, en attendant le CSS4

Cibler les éléments parents (en CSS !)

Determining the Subject of a Selector

**rvm31** · 14/07/2014, 23h09

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 :

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
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 html :

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

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>

**rvm31** · 16/07/2014, 16h16

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.

**Bovino** · 16/07/2014, 16h26

Opéra ne semble pas supporter perspective

Tu as quelle version d'Opera ?

:hover qui agit sur plusieurs éléments [CSS 3]

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager