Changer la couleur d'un <div> au passage de la souris sur un autre <div>

**X260SH** · 09/07/2013, 19h11

Bonjour !

Voilà, il y a quelque temps, j'ai ouvert ce sujet, pour changer la couleur d'un texte lors du passage de la souris sur une image. On m'a répondu d'utiliser les sélecteurs d’adjacence, ce qui avait fonctionné.
Mais maintenant que je veux faire quelque chose de similaire, mais cette fois, avec deux div, je me rends compte que ni le +, ni le ~ ne fonctionne.
Voici mes codes :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="styles.css" media="all" rel="stylesheet" type="text/css">
</head>
<body>
 
<div class="grand"><div id="1">Div 1</div><div id="2">Div 2</div></div>
 
</body>
</html>

Code CSS :

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

1
2
3
.grand{background-color:blue;}
 
#1:hover + #2 {background-color:red;}

Y-a-t-il quelque chose que je fais de travers ? Ou bien est ce que les sélecteurs d'adjacence ne sont-ils pas adapté à cette situation ? Auquel cas, que dois-je utiliser à leur place ?

Merci beaucoup pour vos réponses,
Cordialement,
X260SH.

**rodolphebrd** · 09/07/2013, 19h15

Bonjour,

je dirais qu'il faut éviter de commencer un Identifiant ou une classe par un nombre...

**X260SH** · 09/07/2013, 19h45

Ce n'est mis que pour l'exemple.

**rodolphebrd** · 09/07/2013, 20h08

Bin alors changez le puisque si vous changez les chiffres par des lettres vous obtenez quelque chose.

**X260SH** · 09/07/2013, 21h10

Hum... En effet, merci.
Cependant, j'avais fait cette exemple simple pour le mettre ici ; mais apparemment, il ne fonctionne pas de la même manière.
Alors, mon vrai code est :

Code HTML :

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

1
2
3
<nav><a href="#"><div class="menu" >Présentation</div></a><a href="#"><div class="menu" id="liste">Toutes les listes</div></a><a href="#"><div class="menu" id="contact">Contact</div></a><a href="#"><div class="menu">Espace Membres</div></a>
<div class="sousmenu">A</div><div class="sousmenu">Bs</div><div class="sousmenu">C</div><div class="sousmenu">D</div><div class="sousmenu">E</div><div class="sousmenu">F</div><div class="sousmenu">G</div><div class="sousmenu">H</div>
</nav>

Code CSS :

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
49
50
nav
{
	float:left;
	height:100px;
	background-color:rgba(0, 0, 0, 0, 0);
	top:0;
	left:0;
	position:absolute;
	text-align:center;
	width:100%;
}
 
.menu
{
	height:60%;
	float:left;
	background-color:rgba(0, 0, 0, 1);
	color:white;
	text-align:center;
	line-height:60px;
	font-family:"Segeo UI", Arial;
	width: 25%;	
}
 
.sousmenu
{
	height:40%;
	float:left;
	background-color:rgba(0, 0, 0, 1);
	color:white;
	text-align:center;
	line-height:40px;
	font-family:"Segeo UI", Arial;
	width: 12.5%;
	left:-999em;
	position:relative;
}
 
.menu:hover
{
	background-color:rgba(0, 0, 0, 0.9);
}
 
.sousmenu:hover
{
	background-color:rgba(0, 0, 0, 0.9);
	left:0;
}
 
#liste:hover + .sousmenu {left=0;}

Et là, le #liste:hover + .sousmenu {left=0;} ne marche vraiment pas, alors qu'il n'y a pas de chiffre.

Je vous remercie pour votre patience.
Merci beaucoup !

**rodolphebrd** · 09/07/2013, 22h03

Ouh là !! votre code ne va pas du tout...

Il faut que vous revoyiez votre code html et démarriez à partir d'une liste non ordonnée.
Commencez par placer vos balises A dans les LI. Même si en HTML5 c'est toléré de placer des balises de type bock dans des ancres (balises inline) ça ne correspond pas aux bonnes pratques.

Je vous invite à consulter la galerie CSS où vous trouverez des exemples de menu pour vous aider : http://css.developpez.com/galerie/

**X260SH** · 10/07/2013, 12h36

J'aimerai faire un menu semblable à celui-ci, il n'y a pas de <li>. Est ce quand même valide ?

**rodolphebrd** · 10/07/2013, 12h58

Il y a une différence car c'est un menu à onglets et il n'y a pas de sous-menu comme dans votre exemple.

**X260SH** · 10/07/2013, 13h33

Hum, si, il y a des sous menu.
Je crois qu'on ne parle pas du même menu, je parlais de celui-ci :

Menu horizontal déroulant 3

**rodolphebrd** · 10/07/2013, 15h07

Ah oui désolé

Cependant il s'agit d'un menu géré en JavaScript et les ancres sont incluses dans des DIV.
Bien entendu c'est parfaitement réalisable en CSS pur.

**X260SH** · 11/07/2013, 11h33

Comment est ce qu'on peux le faire en CSS pur ?

**rodolphebrd** · 11/07/2013, 11h52

En apprenant les bases.
La création d'un menu correspond aux bases à connaître.
Sur le web vous avez des quantités d'exemple (démo et code).
Voici la base que je vous conseille qui est commune à la majorité des cas :

Code html :

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

1
2
3
4
5
6
7
<ul id="menu">
  <li><a href="#" title="aller à la section 1">item1</a></li>
  <li><a href="#" title="aller à la section 2">item2</a></li>
  <li><a href="#" title="aller à la section 3">item3</a></li>
  <li><a href="#" title="aller à la section 4">item4</a></li>
  <li><a href="#" title="aller à la section 5">item5</a></li>
</ul>

**X260SH** · 11/07/2013, 12h26

Oui, mais je voulais dire, par rapport au CSS. Est ce qu'il y a moyen de dire, par exemple : la taille d'un sous menu = 100%/par le nombre de sous menu ?

**rodolphebrd** · 11/07/2013, 22h55

Envoyé par X260SH

la taille d'un sous menu = 100%/par le nombre de sous menu

Pourquoi donc ?
Où voulez-vous en venir ?
Quel résultat souhaitez-vous obtenir ?

**X260SH** · 12/07/2013, 10h31

Eh bien, je cherche à ce que les sous menus prennent toute la largeur de la page. Et comme il n'y aurai pas le même nombre de sous menus par menus, il faudrait une "formule" qui soit valable pour tous.

**rodolphebrd** · 12/07/2013, 10h42

Oui c'est possible mais pas à l'aide d'une formule à proprement parlé.

**X260SH** · 12/07/2013, 11h09

C'est à dire ? Pouvez-vous me montrer un exemple simple ? Je vous remercie pour votre patiente.

**rodolphebrd** · 12/07/2013, 11h19

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
24
25
26
27
28
29
<div id="conteneur">
  <div id="div_nav">
    <ul id="ul_menu">
      <li>Menu #1
        <div>
          <p>Cibos vehementer vehementer solitarum quod propinquantis Isauri per solitarum quae.</p>
          <p>Filius quae clades lapide exilium ab quarto pater quae cruribus vicensimo acti Crateras ad filius per fortunas igitur cum Apollinares suam acti actitata constaret Apollinares locum clades quaedam cum Apollinares.</p>
        </div>
      </li>
      <li>Menu #2
        <div>
          <p>Sibi quaesitoresque accusatores militum subditivos accitus quae subsidia imperiale tumor Vrsicinus Caesaris forensibus a subditivos abnuens certamina isdem litteris quorum cerneret agitabantur sibi militum accusatores consociatos sui exhalaret iunxerat iunxerat.</p>
        </div>
      </li>
      <li>Menu #3
        <div>
          <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.
        </div>
      </li>
    </ul>
  </div>
  <div id="div_article">
        <p>In reprehenderit in voluptate duis aute irure dolor cupidatat non proident. Velit esse cillum dolore consectetur adipisicing elit, lorem ipsum dolor sit amet. Eu fugiat nulla pariatur. In reprehenderit in voluptate mollit anim id est laborum.</p>
    <p>Ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt cupidatat non proident, duis aute irure dolor. Velit esse cillum dolore ullamco laboris nisi ut labore et dolore magna aliqua. Eu fugiat nulla pariatur.</p>
    <p>Ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, quis nostrud exercitation eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt consectetur adipisicing elit, excepteur sint occaecat. Duis aute irure dolor velit esse cillum dolore ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet, ullamco laboris nisi qui officia deserunt. Sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Sunt in culpa.</p>
    <p>Velit esse cillum dolore ut enim ad minim veniam, in reprehenderit in voluptate. Sunt in culpa eu fugiat nulla pariatur. Quis nostrud exercitation mollit anim id est laborum.</p>
  </div>
</div>

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
html,body {
  font-size:100%;
  font-family:Verdana,Arial;
}
#conteneur {
  position:relative;
  font-size:0.8em;
  border:1px solid #E0E0E0;
  width:60em;
  height:40em;
  padding-top:5em;
  margin:auto;
}
#div_nav {
  margin:auto;
  width:40em;
}
#div_article {
  margin:2em auto;
  width:40em;
}
#ul_menu {
  position:relative;
  width:100%;
  padding:0;
  margin:0;
  height:2em;
  border: 1px solid rgba(0,0,0,.1);
  background: #EFEFEF;
  border-radius: .2em;
}
#ul_menu li {
  display:inline-block;
  float:left;
  min-width:8em;
  line-height:2em;
  font-weight:bold;
  text-align:center;
  cursor:pointer;
}
#ul_menu li div {
  position:absolute;
  left:0;
  top:0;
  right:0;
  margin-top:2em;
  padding:1em;
  display:none;/**/
  color:white;
  font-weight:normal;
  text-align:left;
  line-height:1.5em;
  border:1px solid #CCC;
  background-color:#666;
}
#ul_menu li:hover div {
  display:block;
}
#ul_menu li:hover {
  color:#FFF;
  background-color: #F60;
}

Note : effectué à partir d'un exemple de NoSmoking.

**X260SH** · 12/07/2013, 11h55

Merci beaucoup !!
Encore une dernière chose, comment est ce que je peux centrer les menus et les sous menus et comment modifier leurs hauteurs ?

**rodolphebrd** · 12/07/2013, 12h14

modifications pour le centrage du menu:

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
#ul_menu {
  position:relative;
  width:100%;
  padding:0;
  margin:0;
  height:2em; /* hauteur du menu */
  border: 1px solid rgba(0,0,0,.1);
  background: #EFEFEF;
  border-radius: .2em;
  text-align:center;
}
#ul_menu li {
  display:inline-block;
  min-width:8em;
  line-height:2em;
  font-weight:bold;
  text-align:center;
  cursor:pointer;
}

centrage du sous-menu (texte à l'intérieur)

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
#ul_menu li div {
  position:absolute;
  left:0;
  top:0;
  right:0;
  margin-top:2em;
  padding:1em;  /* c'est à partir d'ici */
  display:none; 
  color:white;
  font-weight:normal;
  text-align:left;
  line-height:1.5em;
  border:1px solid #CCC;
  background-color:#666;
  height:200px; /* hauteur sous-menu */
}

Un conseil : apprenez les bases

Changer la couleur d'un <div> au passage de la souris sur un autre <div>

CSS

Discussions similaires

Partager

Partager