Changer la couleur d'un bordure d'un menu lors du survol d'un onglet de ce menu

**Leniouns** · 30/05/2015, 13h08

Bonjour à tous,

Je ne sais pas si le titre de mon sujet est assez clair.

En fait j'ai un menu auquel j'affecte une bordure en bas avec une couleur blanche pour qu'elle soit invisible. Lorsque je survol un onglet de ce menu j'aimerai que la bordure de ce menu change de couleur.

Pour être plus précis, voici mon code HTML :

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
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
	<head>
		<title>Mon site</title>
		<meta charset="UTF-8">
        </head>
	 <body>
        <header>
            <h1>mon site</h1>
        </header>
 
        <nav id="menu">
            <ul>
                <li id="accueil"><a href="#" >Accueil</a></li><!--
                --><li><a href="#">Toulouse FC</a></li><!--
                --><li><a href="#">Bande Dessinées</a></li>
            </ul>
        </nav>
 
 
        <section>
            <aside>
                <h1>À propos de l'auteur</h1>
                <p>Ma présentation</p>
            </aside>
            <article>                
                <h1></h1>
                <p>Bla bla bla bla (texte de l'article)</p>
            </article>
        </section>
 
        <footer>
            <p>Copyright monsite - Tous droits réservés<br />
            <a href="#">Me contacter !</a></p>
        </footer>
 
    </body>
 
</html>

Et voici mon CSS :

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
nav {
	border-bottom: solid;
	border-width: 2px;
	border-color: white;
}
 
nav ul{
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	background-color: #333333;
}
 
nav li{
	display: inline-block;
	width: 150px;
	height: 25px;
	margin: 0px;
	padding: 0px;
	border-right: 1px solid #CCCCCC;
	text-align: center;
	line-height: 25px;
}
 
nav li :hover{
	background-color: #3388BB;
}
 
nav li a{
	display: block;
	text-decoration: none;
	color: #FFFFFF;
}

Pour l'instant j'ai fait en sorte dans le CSS que lorsqu'on survol un onglet celui ci change de couleur, et donc j'aimerai que la bordure basse du menu aie la même couleur.

Il me semble que cela est impossible en CSS3, du coup j'ai effectué quelques recherches en JS et Jquery mais sans véritable succès.

Je vous remercie par avance pour votre aide et vous souhaite une agréable journée.

Cordialement,

Leniouns.

**NoSmoking** · 30/05/2015, 13h35

Bonjour,

Il me semble que cela est impossible en CSS3

en CSS tout court d'ailleurs, il te suffit d'ajouter ces caractéristiques sur e :hover.

Code css :

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

1
2
3
4
nav li :hover{
    background-color: #3388BB;
    border-bottom:2px solid yellow; /* pour exemple */
}

**Leniouns** · 30/05/2015, 15h23

Ce n'est pas vraiment ce que je veux faire.

En fait je veux que la bordure soit tout au long du menu. Donc que ce soit la bordure du <nav> qui se colore. C'est pour cela que j'en ai créé une avec comme couleur blanche pour qu'elle soit invisible.

Mais par la suite je ne sais pas comment faire pour que lorsqu'on survol un onglet du menu cette bordure se colore.

Mais merci en tout cas pour ta contribution.

**NoSmoking** · 30/05/2015, 15h28

Donc que ce soit la bordure du <nav> qui se colore.

Dans ce cas

Code css :

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

1
2
3
nav:hover {
    border-color: red; /* par exemple */
}

**Leniouns** · 30/05/2015, 15h42

Euh non plus...

Nom : Capture d’écran 2015-05-30 à 15.39.10.png
Affichages : 1296
Taille : 11,7 Ko

En fait par exemple si je met ma souris su l'onglet "Accueil", j'aimerai qu'une bordure faisant tout le menu s'affiche. Mais je ne veux pas que si je passe la souris a droite sur le menu (mais pas sur un onglet) que la bordure s'affiche.

Invité · 30/05/2015, 15h44

Bonjour ,

Envoyé par Leniouns

... j'ai un menu auquel j'affecte une bordure en bas avec une couleur blanche pour qu'elle soit invisible....

Ne pas confondre "blanc" et "invisible".
Si tu veux une bordure transparente (=> sans couleur) :

Code css :

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

border-color:transparent;

[EDIT] Pour ton histoire, on ne peut pas, en CSS, "remonter" la cascade (en amont) !

Par contre, il est possible de modifier un élément venant APRES (en aval).
Montre-nous le code de ton menu.

**Leniouns** · 30/05/2015, 16h01

Oui c'est vrai que ce n'est pas pareil.

Sur mon premier post j'ai mis le code HTML et CSS.

Il me semble en effet qu'en CSS c'est impossible et qu'il faut le faire avec un script JS non ?

Invité · 30/05/2015, 16h36

Voici une astuce :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<nav id="menu">
<ul>
	<li><a href="#">menu 1</a></li><!--
 --><li><a href="#">menu 2</a></li><!--
 --><li><a href="#">menu 3</a></li><!--
 --><li><a href="#">menu 4</a></li><!--
 --><li><a href="#">menu 5</a></li><!--
 --><li class="ligne"></li>
</ul>
</nav>

Code css :

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

1
2
3
4
5
#menu > ul { width:100%; margin:0; padding:0; list-style-type: none; background-color: #333333; }
#menu > ul> li:not(.ligne) { display:inline-block; margin:0; padding:0; border-right: 1px solid #CCCCCC; text-align:center; }
#menu > ul> li a { display:block; padding:5px; background:#ccc; min-width:150px; min-height:25px; line-height:25px; }
#menu > ul> li.ligne { display:block; clear:both; height:2px; background:transparent; }
#menu > ul> li:not(.ligne):hover ~ li.ligne { background:red; } /*  ~  est un sélecteur d'adjacence */

~ est un sélecteur d'adjacence

[EDIT] Cela dit... c'est se donner beaucoup de mal pour pas grand'chose !

**NoSmoking** · 30/05/2015, 16h53

Il me semblait qu'il y avait plus simple en reprenant légèrement le CSS

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
nav {
	border-bottom: solid;
	border-width: 2px;
	border-color: white;
	width:100%;                  /* Ajout */
	height:1.5em;                /* Ajout car UL en float:left */
	background-color: #333333;   /* Ajout par transfert du fond de UL */
}
nav ul:hover {
	border-bottom: solid;
	border-width: 2px;
	border-color: red;
}
nav ul{
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	float:left;                  /* Ajout */
	height:1.5em;                /* Ajout */
}

surement à ajuster

Invité · 30/05/2015, 17h03

@NoSmoking :
Tu as raté une "subtilité" de la demande...

(que je n'ai moi-même vu qu'après relecture !)

Envoyé par Leniouns

...lorsqu'on survol un onglet celui ci change de couleur, et donc j'aimerai que la bordure basse du menu aie la même couleur...

Et pour que la ligne ait la même couleur que l'onglet au survol : http://codepen.io/jreaux62/pen/OVWzoz

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
#menu > ul { width:100%; margin:0; padding:0; list-style-type: none; background-color: #333333; }
#menu > ul> li:not(.ligne) { display:inline-block; margin:0; padding:0; border-right: 1px solid #CCCCCC; text-align:center; }
#menu > ul> li a { display:block; padding:5px; min-width:150px; min-height:25px; line-height:25px; color:#fff; }
#menu > ul> li a, #menu > ul> li a:hover { text-decoration:none; }
#menu > ul> li.ligne { display:block; clear:both; height:4px; background:transparent; }
 
#menu > ul> li#m1:hover, #menu > ul> li#m1:hover ~ li.ligne { background-color: #3388BB; }
#menu > ul> li#m2:hover, #menu > ul> li#m2:hover ~ li.ligne { background-color: red; }
#menu > ul> li#m3:hover, #menu > ul> li#m3:hover ~ li.ligne { background-color: yellow; }
#menu > ul> li#m4:hover, #menu > ul> li#m4:hover ~ li.ligne { background-color: green; }
#menu > ul> li#m5:hover, #menu > ul> li#m5:hover ~ li.ligne { background-color: pink; }

Code html :

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

1
2
3
4
5
6
7
8
9
10
<nav id="menu">
<ul>
	<li id="m1"><a href="#">menu 1</a></li><!--
 --><li id="m2"><a href="#">menu 2</a></li><!--
 --><li id="m3"><a href="#">menu 3</a></li><!--
 --><li id="m4"><a href="#">menu 4</a></li><!--
 --><li id="m5"><a href="#">menu 5</a></li><!--
 --><li class="ligne"></li>
</ul>
</nav>

Et tout ça, SANS JavaScript !

**Leniouns** · 30/05/2015, 17h08

Merci pour vos solutions

En effet jreaux62 c'est le comportement attendu. J'essaye d'implémenter ça et je vous tiens au courant

Edit : C'est bon j'ai réussi

Merci pour votre aide. Je vais mettre en résolu, mais pour ma culture, y avait il un moyen de le faire en javascript ? Et si oui comment ?

Merci encore.

Changer la couleur d'un bordure d'un menu lors du survol d'un onglet de ce menu

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

Vue hybride

Discussions similaires

Partager

Partager