Changer la couleur d'un texte au survol de son conteneur

**fifidibosco** · 10/09/2020, 12h20

.
Bonjour à tous,

j'ai fait un menu dont les sous-menus et les "sous-sous-menus" se déroulent complètement lorsqu'on survole le premier niveau (menu).
Au survol de la ligne de menu, si le fond change bien de couleur, le texte lui ne change pas. Pour qu'il change de couleur, il faut que le texte lui-même soit survolé.
J'aimerais que le texte change de couleur lorsque la ligne est survolée, même si le texte lui-même ne l'est pas.

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
40
<body>
    <div class="boite">
        <div class="menu">
            <ul class="niveau1">
                <li class="sousmenu line1"><a href="menu 1">menu 1</a>
                    <ul class="niveau2">
                        <li><a href="Sous menu 2.1">Sous menu 1.1</a></li>
                    </ul>
                </li>
                <li class="sousmenu line2"><a href="menu 2">menu 2</a>
                    <ul class="niveau2">
                        <li><a href="Sous menu 2.1">Sous menu 2.1</a></li>
                    </ul>
                </li>
                <li class="sousmenu line3"><a href="menu 3">menu 3</a></li>
                <li class="sousmenu line4"><a href="menu 4">menu 4</a>
                    <ul class="niveau2">
                        <li class="sousmenu"><a href="Sous menu 4.1">Sous menu 4.1</a>
                            <ul class="niveau3">
                                <li><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="sousmenu line5"><a href="menu 4">menu 5</a>
                    <ul class="niveau2">
                        <li class="sousmenu"><a href="Sous menu 4.1">Sous menu 5.1</a>
                            <ul class="niveau3">
                                <li><a href="Sous sous menu 4.1.1">Sous sous menu 5.1.1</a></li>
 
                            </ul>
                        </li>
 
                    </ul>
                </li>
 
            </ul>
        </div>
    </div>
</body>

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
* {
    margin: 0;
    padding: 0;
}
 
.boite {
    border: 3px red solid;
    width: 500px;
    height: 500px;
    position: relative;
    top: 100px;
    left: 400px;
}
 
.line1:hover{
    background-color: red;
    color:white;
}
.line2:hover{
    background-color: navy;
    color:white;
}
.line3:hover{
    background-color: orange;
    color:white;
}
.line4:hover{
    background-color: green;
    color:white;
}
.line5:hover{
    background-color: firebrick;
    color:white;
}
.menu {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
}
 
.menu ul {
    text-align: right;
    padding: 0;
    width: 200px;
    border: 1px solid navy;
    margin: 0px;
}
 
.menu ul li {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
    list-style: none;
    padding-right: 10px;
    font-size: 1em;
    /*border-bottom: 1px solid;*/
}
 
 
.menu ul ul {
    position: absolute;
    top: 0px;
    left: 52px;
    width: 200px;
    display: none;
}
 
.menu li a {
    color: navy;
    text-decoration: none;
}
 
.menu li a:hover {
    color:white;
}
 
.menu li.sousmenu {
    left: 205px;
    /*background: aqua;*/
}
 
.menu ul.niveau1 li.sousmenu:hover ul.niveau2 {
    display: flex;
    align-items: center;
    justify-content: center;
    left: 202px;
    height: 250px;
    text-align: center;
    background-color: yellow;
    color:black;
}
 
.menu ul.niveau1 li.sousmenu:hover ul.niveau3 {
    display: flex;
    align-items: center;
    justify-content: center;
    left: 202px;
    height: 250px;
    width:300px;
    text-align: center;
    font-size: 1em;
    background-color: aqua;
    color:black;
}

j'ai essayé un peu toutes les combinaisons, <a> dans <li>, <li> dans <a> et autres, sans résultat.
j'en suis là (voir codes) les classes .line:hover change bien la couleur du background, mais pas celle de la police.

Par avance merci,

Fifi
.

**ProgElecT** · 10/09/2020, 15h37

Salut
Il y a peut être mieux que

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.line1:hover{background-color:red}
.line1:hover > a{color:white;}
 
.line2:hover{background-color:navy}
.line2:hover > a{color:white;}
 
.line3:hover{background-color:orange}
.line3:hover > a{color:white;}
 
.line4:hover{background-color:green}
.line4:hover > a{color:white;}
 
.line5:hover{background-color:firebrick}
.line5:hover > a{color:white;}

**fifidibosco** · 10/09/2020, 17h10

.

ça fonctionne impec, merci
fifi

.

**NoSmoking** · 10/09/2020, 19h19

Bonjour,

Envoyé par ProgElecT

Il y a peut être mieux que

mieux je sais pas mais il y a plus concis en utilisant currentColor :

Code :

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

1
2
3
4
5
6
7
8
9
10
.menu li {
  color: navy;
}
.menu li:hover {
  color: white;
}
.menu li a {
  color: currentColor;
  text-decoration: none;
}

**fifidibosco** · 11/09/2020, 17h27

.
Bonjour,

en fait j'ai complètement changer mon fusil d'épaule, et le menu je l'ai fait avec des div et la propriété display:
C'est plus flexible et plus facile à gérer que les listes.
On peut empiler autant de lignes de menu qu'on veut, il suffit de modifier les positions par rapport au haut de la page, ou d'un conteneur.

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
    <div class="menusl">
        <a style="" href="#">menu 1</a>
        <div class="picsl">
            <img src="img/5.jpg" alt="image 05">
        </div>
        <div class="comsl">
            <p style="margin-bottom: 3px;">Commentaire 1</p>
            <p>commentaire 3</p>
            <p>commentaire 3</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
.menusl{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 1.4em;
    color:red;
    width:300px;
    height:50px;
    top:20px;
    left: 50px;
}
 
.menusl:hover{background-color: red;}
.menusl:hover > a {color:white;}
.menusl a{
    text-align: right;
    width:100%;
    color:navy;
    text-decoration: none;
}
 
.picsl {
    position:absolute;
    width:300px;
    height:385px;
    top:0px;
    left: 310px;
    border:solid green 1px;
    font-size: 1.5rem;
    display: none;
    padding: 20px;
}
 
.comsl {
    position:absolute;
    width:300px;
    height:200px;
    top:0px;
    left: 650px;
    padding-left: 10px;
    border:solid red 1px;
    display: none;
    color:green;
    font-size: 1rem;
}
 
.menusl:hover .picsl {
    display: block;
    color:navy;
}
.menusl:hover .comsl {
    display: block;
}

**NoSmoking** · 12/09/2020, 15h55

en fait j'ai complètement changer mon fusil d'épaule, et le menu je l'ai fait avec des div et la propriété display:

je n'en vois pas bien l’intérêt !

Changer la couleur d'un texte au survol de son conteneur

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

Vue hybride

Discussions similaires

Partager

Partager