it-swarm.com.de

Bootstrap-Navbar auf Hover-Link ändern?

Ich möchte wissen, wie Sie die Farbe der Links ändern können, wenn Sie in der Navigationsleiste darüber fahren, da sie derzeit eine unschöne Farbe haben.

Danke für irgendwelche Vorschläge?

HTML:

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
            </ul>
        </div>
    </div>
</div>
54
Callum

Für Bootstrap 3 habe ich dies auf der Basis der standardmäßigen Navbar Struktur gemacht:

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #FFFF00;
    color: #FFC0CB;
}
85

Das ist sauberer:

ul.nav a:hover { color: #fff !important; }

Es ist nicht nötig, genauer zu werden. Leider ist der !important in diesem Fall notwendig.

Aus Gründen der Barrierefreiheit und für Benutzer von Smartphones/Tablets/Touchscreens habe ich der gleichen Erklärung auch :focus und :active hinzugefügt.

47
trebor1979

Sie können dies versuchen, um den Link-Hintergrund beim Schweben zu ändern

.nav > li > a:hover{
    background-color:#FCC;
}
15
Seydou Loum

Sie müssten die CSS-Regel überschreiben:

.navbar-inverse .brand, .navbar-inverse .nav > li > a

oder

.navbar .brand, .navbar .nav > li > a 

abhängig davon, ob Sie das dunkle oder helle Thema verwenden. Fügen Sie dazu ein CSS mit Ihren überschriebenen Regeln hinzu, und stellen Sie sicher, dass es in Ihrem HTML after dem Bootstrap-CSS enthalten ist. Zum Beispiel:

.navbar .brand, .navbar .nav > li > a {
    color: #D64848;
}
.navbar .brand, .navbar .nav > li > a:hover {
    color: #F56E6E;
}

Es gibt auch die Alternative, bei der Sie Ihren eigenen Boostrap hier anpassen können. In diesem Fall haben Sie im Abschnitt Navbar den @navbarLinkColor.

6
.nav > li > a:focus, 
.nav > li > a:hover 
{
    text-decoration: underline;
    background-color: pink;
}
4

Richten Sie das Element aus, das Sie ändern möchten, und verwenden Sie !important, um vorhandene Stile, die diesem Element zugewiesen sind, zu überschreiben. Stellen Sie sicher, dass Sie die !important-Deklaration nicht verwenden, wenn dies nicht unbedingt erforderlich ist.

div.navbar div.navbar-inner ul.nav a:hover {
    color: #fff !important; 
}
4
Kevin Lynch

Aktualisiert 2018

Sie können die Navbar-Linkfarben mit CSS ändern, um die Bootstrap-Farben zu überschreiben ...

Bootstrap 4

.navbar-nav .nav-item .nav-link {
    color: red;
}
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
    color: pink;
}

Bootstrap 4 Navbar-Link-Farbdemo

Bootstrap 3

.navbar .navbar-nav > li > a,
.navbar .navbar-nav > .active > a{
    color: orange;
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
    color: red;
}

Bootstrap 3 Navbar-Link-Farbdemo


.__ Die Änderung oder die gesamte Navbar-Farbe anpassen, siehe: https://stackoverflow.com/a/18530995/171456

4
Zim

Verwenden Sie Come thing link this, Dies basiert auf Bootstrap 3.0

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: #977EBD;
    color: #FFFFFF;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #977EBD;
    color: #FFFFFF;
}
3
socialCoder

Entschuldige die späte Antwort. Sie können nur verwenden:

   nav a:hover{

                   background-color:color name !important;


                 }
3
Farhan Ghaffar

So etwas hat bei mir (mit Bootstrap 3) funktioniert:

.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
    font-family: proxima-nova;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: black;
} 

In meinem Fall wollte ich, dass der Linktext vor dem Schwebeflug schwarz bleibt, und fügte hinzu: .navbar-nav> li> a.

.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-nav > li > a{
    font-family: proxima-nova;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: black;
} 
1
Eric
.navbar-default .navbar-nav > li > a{
  color: #e9b846;
}
.navbar-default .navbar-nav > li > a:hover{
  background-color: #e9b846;
  color: #FFFFFF;
}
0
Ajit Kumar

Wenn Sie Navbar Code wie folgt eingeben:

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
        </ul>
    </div><!--/.nav-collapse -->
</div>

Verwenden Sie dann einfach den folgenden CSS-Stil, um die Hover-Farbe Ihrer navbar-Marke zu ändern.

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
     color: white;
}

Ihre navbad-brand Schwebefarbe wird also in Weiß geändert. Ich habe es gerade getestet und es funktioniert für mich richtig.

0
Shaharia Azam

Das sollte reichen:

.nav.navbar-nav li a:hover {
  color: red;
}
0
Ömer An