Изменить цвет бутстрапа navbar на ссылку hover?

Я хочу знать, как изменить цвет ссылок, когда вы наводите на них курсор в навигационной панели, так как в настоящее время они являются уродливым цветом.

Спасибо за любые предложения?

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>

Ответ 1

Для Bootstrap 3 так я сделал это на основе структуры Navbar по умолчанию:

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

Ответ 2

Это чище:

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

Не нужно больше конкретизировать это. К сожалению, в этом случае необходим !important.

Я также добавил :focus и :active в одно и то же объявление по причинам доступности и для пользователей смартфонов/планшетов/сенсорных экранов.

Ответ 3

Вы можете попробовать это, чтобы изменить фон ссылки при наведении курсора

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

Ответ 4

Вам придется перезаписать правило CSS:

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

или

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

зависит, если вы используете темную или светлую тему, соответственно. Чтобы сделать это, добавьте CSS с вашими перезаписанными правилами и убедитесь, что он входит в ваш HTML после Bootstrap CSS. Например:

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

Существует также альтернатива, где вы настраиваете свой собственный Boostrap здесь. В этом случае в разделе Navbar у вас есть @navbarLinkColor.

Ответ 5

Обновлено 2018

Вы можете изменить цвета ссылок Navbar с помощью CSS, чтобы переопределить цвета начальной загрузки...

Бутстрап 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 цветовая демонстрация ссылки на панель навигации

Бутстрап 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, см. fooobar.com/questions/13517/...

Ответ 6

Направьте элемент, который вы хотите изменить, и используйте !important, чтобы перезаписать все существующие стили, назначенные этому элементу. Обязательно не используйте объявление !important, если это не является абсолютно необходимым.

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

Ответ 7

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

Ответ 8

Используйте ссылку "Приходите", это основано на 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;
}

Ответ 9

Извините за поздний ответ. Вы можете использовать только:

   nav a:hover{

                   background-color:color name !important;


                 }

Ответ 10

Что-то вроде этого сработало для меня (с Bootstrap 3):

.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;
}

В моем случае я также хотел, чтобы текст ссылки оставался черным до наведения, поэтому я добавил .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;
}

Ответ 11

Если вы Наббар, выполните следующие действия:

<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>

Затем просто используйте следующий стиль CSS, чтобы изменить цвет наведения вашего навигационного бренда

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

Таким образом, цвет наведения navbad-brand будет изменен на белый. Я просто протестировал его, и он работает для меня правильно.

Ответ 12

Этого должно быть достаточно:

.nav.navbar-nav li a:hover {
  color: red;
}

Ответ 13

.navbar-default .navbar-nav > li > a{
  color: #e9b846;
}
.navbar-default .navbar-nav > li > a:hover{
  background-color: #e9b846;
  color: #FFFFFF;
}