호버 링크에서 부트 스트랩 탐색 모음의 색상을 변경 하시겠습니까?

호버 링크에서 부트 스트랩 탐색 모음의 색상을 변경 하시겠습니까?

---

현재는 못생긴 색상이므로 탐색 모음에서 링크 위에 마우스를 올려 놓을 때 링크 색상을 변경하는 방법을 알고 싶습니다.

제안 해 주셔서 감사합니다.

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>

---

들어 부트 스트랩 3 나는 기본을 기반으로 이런 짓을하는 방법이있다 Navbar를의 구조 :

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

---

이것은 더 깨끗합니다.

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

이보다 더 구체적 일 필요는 없습니다. 안타깝게도이 !important경우이 필요합니다.

또한 추가 :focus및 :active접근성 이유로 스마트 폰 / 태블릿 / 터치 스크린 사용자에 대해 동일한 선언.

---

마우스 오버시 링크 배경을 변경하려면 이것을 시도 할 수 있습니다.

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

---

CSS 규칙을 덮어 써야합니다.

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

또는

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

각각 어둡거나 밝은 테마를 사용하는지에 따라 다릅니다. 이렇게하려면 덮어 규칙과 CSS를 추가하고 있는지 그것이 당신의 HTML로 제공 할 후 부트 스트랩 CSS. 예를 들면 :

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

여기에서 자신의 Boostrap을 사용자 정의하는 대안도 있습니다 . 이 경우 Navbar 섹션에 @navbarLinkColor.

---

2018 년 업데이트

CSS로 Navbar 링크 색상 을 변경하여 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 링크 색상 데모

부트 스트랩 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 링크 색상 데모

---

전체 Navbar 색상을 변경하거나 사용자 정의합니다 . https://stackoverflow.com/a/18530995/171456을 참조하십시오.

---

변경하려는 요소를 대상 !important으로 지정하고 해당 요소에 할당 된 기존 스타일을 덮어 쓰는 데 사용 합니다. !important절대적으로 필요하지 않은 경우 선언 을 사용 하지 마십시오.

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

---

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

---

Come thing link this, This is Based on 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;
}

---

늦은 답변 죄송합니다. 다음 만 사용할 수 있습니다.

   nav a:hover{

                   background-color:color name !important;


                 }

---

이와 같은 것이 나를 위해 일했습니다 (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;
} 

---

다음과 같이 Navbar 코드를 사용하는 경우 :

<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 브랜드 의 호버 색상을 변경하십시오.

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

따라서 navbad-brand호버 색상이 흰색으로 변경됩니다. 방금 테스트했는데 제대로 작동하고 있습니다.

---

이것으로 충분합니다.

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

---

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

ReferenceURL : https://stackoverflow.com/questions/16625972/change-color-of-bootstrap-navbar-on-hover-link