Discussion :

[[ZiP]]

Bonjour,

Je voudrais que le texte qui a servi à ouvrir le dropdown reste rouge même quand la souris n'est plus sur le dropdown et je n'arrive pas à le faire.

Mon code est ici : https://jsfiddle.net/cLqay9go/

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
		<nav class="navbar navbar-expand-lg navbar-light bg-white">
			<a class="navbar-brand" href="#">TEST</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item">
						<a class="nav-link" href="#">Accueil</a>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMedias" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Médias</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdownMedias">
							<a class="dropdown-item" href="#">Articles de presse</a>
							<a class="dropdown-item" href="#">Photos</a>
							<a class="dropdown-item" href="#">Vidéos</a>
						</div>
					</li>
				</ul>
			</div>
		</nav>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link
{
	color				: #dc3545;
}
 
.active-dropdown, .dropdown-menu > li > a:hover, .dropdown-menu > a:hover
{
	background-color	: #dc3545;
	color				: white;
}

Pouvez-vous m'aider à réaliser ce comportement ?

Merci part avance,
ZiP

[ma5t3r]

Salut,

Code :

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

1
2
3
4
 
.nav-link.dropdown-toggle:focus {
  color: #dc3545!important;
}