简体   繁体   中英

Changing color within navbar

I'm trying for change the color of the parameter "hover" within the navbar of the script.

In the css file "colors" I see this:

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #e1e1e1;
}

Changing "focus" works perfectly but If I try for change "hover" in this way, nothing:

.navbar-inverse .navbar-nav > .active > a;
.navbar-inverse .navbar-nav > .active > a:hover {
    background-color: #e1e1e1;
}

.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #e1e1e1;
}

The other options are:

.navbar-inverse {
    background-color: #ffffff;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
}

.navbar-inverse .navbar-nav > li > a {
  color: #ababab;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #ffffff;
}

.navbar-inverse .navbar-toggle {
    border-color: transparent;
    background-color: rgba(255,255,255,0.05);
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: rgba(255,255,255,0.1);
}

Suggestions?

There's an order to which you place these particular pseudo-selectors:

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active
  5. a:focus *

* :focus isn't in this series AFAIK, but put it last just in case.

 body { background-color: black; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:link, .navbar-inverse .navbar-nav > .active > a:visited { background-color: #e1e1e1; color: blue; font: 400 40px/1.5 Verdana; text-decoration: none; padding:5px 10px; } .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:active, .navbar-inverse .navbar-nav > .active > a:focus { background-color: #b00b12; color: cyan; } 
 <nav class='navbar-inverse'> <nav class='navbar-nav'> <div class='active'> <a href='#/https://pron.069'>Adult Videos</a> </div> </nav> </nav> 

Just change ; in place of that use ,

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover {
    background-color: #e1e1e1;
}

.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #e1e1e1;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM