Change link color when hovering over in Bootstrap

Asked

Viewed 1,634 times

2

I started learning bootstrap today and made a very simple test site. It has a navbar with some links. The point is that I can not change the color in the links when passing the mouse in any way, only with the default interaction (darken when passing the mouse). If anyone can help me, I’d be grateful, follow the code

HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <!--Bootstrap-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

        <!--Fonts-->
        <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">

        <!--Stylesheet-->
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>Teste</title>
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div id="navbar" class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Teste</a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a href="#indicadores">Indicadores</a></li>
                    <li><a href="#aprendizagem">Aprendizagem</a></li>
                    <li><a href="#graficos">Gráficos</a></li>
                    <li><a href="#simulador">Simulador</a></li>
                    <li><a href="#carteira">Carteira</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Registrar-se</a></li>
                    <li><a href="#">Entrar</a></li>
                </ul>
            </div>
        </nav>

        <div class="container">
            <h3>Exemplo</h3>
            <p>Testando a página em Bootstrap</p>
        </div>
    </body>
</html>

CSS

body {
    font-family: "Poppins";
    margin: 0px;
}

/*----------Navbar----------*/

.container-fluid a:hover{
    color: rgb(26, 244, 183);
}

#navbar {
    background-color: rgb(46,41,58);
    margin: 0px;
}

.navbar, .navbar-default {
    border: none;
}

nav a:hover {
    color: aqua;
}

.navbar-nav {
    color: aqua;
}
css twitter-bootstrap
  • 1

    We have a solution for this at Stackoverflow.com: https://stackoverflow.com/questions/16625972/change-color-of-bootstrap-navbar-on-hover-link

  • I just had to put in a statement !Important in Hover staying like this: nav a:hover { color: aqua !important; }

2 answers

1

The solution would be?

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
    color: aqua;
}

  • It would be good for you to learn how to use the browser debug tools, it helps you identify which css selectors are affecting the elements you want to change

  • It worked buddy, thanks!

1


By Bootstrap’s CSS style, the links <a> the Nav has more strength, that is, has greater specificity (see how to calculate specificity in this response) than when you put nav a{ color: aqua; }. Bootstrap defines link properties with the style below:

.navbar-default .navbar-nav>li>a {
    color: #777;
}

That is, the style above has more strength than:

nav a{
   color: aqua;
}

And that goes for the same :hover. If you want to force a property to take priority by ignoring styles with greater force and priority, just add !important to the property:

nav a:hover {
    color: aqua !important;
}

Behold:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <!--Bootstrap-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

        <!--Fonts-->
        <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">

        <!--Stylesheet-->
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style>

body {
    font-family: "Poppins";
    margin: 0px;
}

/*----------Navbar----------*/

.container-fluid a:hover{
    color: rgb(26, 244, 183);
}

#navbar {
    background-color: rgb(46,41,58);
    margin: 0px;
}

.navbar, .navbar-default {
    border: none;
}

nav a:hover {
    color: aqua !important;
}

.navbar-nav {
    color: aqua;
}
        </style>
        <title>Teste</title>
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div id="navbar" class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Teste</a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a href="#indicadores">Indicadores</a></li>
                    <li><a href="#aprendizagem">Aprendizagem</a></li>
                    <li><a href="#graficos">Gráficos</a></li>
                    <li><a href="#simulador">Simulador</a></li>
                    <li><a href="#carteira">Carteira</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Registrar-se</a></li>
                    <li><a href="#">Entrar</a></li>
                </ul>
            </div>
        </nav>

        <div class="container">
            <h3>Exemplo</h3>
            <p>Testando a página em Bootstrap</p>
        </div>
    </body>
</html>

  • It worked right here, thanks!

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.