web-dev-qa-db-ja.com

ホバーリンクのbootstrap navbarの色を変更しますか？

ナビゲーションバーでリンクの上にマウスを置いたときにリンクの色を変更する方法を知りたいのですが、現在はtheyい色です。

提案をありがとう

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>
htmlcsstwitter-bootstrapcolorsnavbar
55
Callum

Bootstrap 3の場合、これはデフォルトの Navbar 構造に基づいてこれを行った方法です：

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

これはきれいです：

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

これより具体的にする必要はありません。残念ながら、このインスタンスには!importantが必要です。

また、アクセシビリティの理由とスマートフォン/タブレット/タッチスクリーンのユーザーのために、:focusと:activeを同じ宣言に追加しました。

48
trebor1979

これを試して、ホバーのリンクの背景を変更できます

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

CSSルールを上書きする必要があります。

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

または

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

それぞれ暗いテーマを使用しているか、明るいテーマを使用しているかによって異なります。これを行うには、上書きされたルールを使用してCSSを追加し、HTMLに含まれていることを確認しますafterBootstrap CSS。例えば：

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

独自のBoostrap here をカスタマイズする代替手段もあります。この場合、Navbarセクションに@navbarLinkColorがあります。

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

変更する要素をターゲットにし、!importantを使用して、その要素に割り当てられている既存のスタイルを上書きします。絶対に必要でない場合は、!important宣言を使用しないでください。

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

これをリンクしてください、これは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

返事が遅れて申し訳ありません。次のもののみ使用できます。

   nav a:hover{

                   background-color:color name !important;


                 }
3
Farhan Ghaffar

このような何かが私のために働いています（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;
}
1
Eric

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-brandのホバーカラーを変更します。

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

したがって、navbad-brandホバーの色は白に変更されます。私はちょうどそれをテストし、それは私のために正しく働いています。

0
Shaharia Azam

これで十分です：

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