現在、リンクは醜い色になっているため、ナビゲーション バーでホバーしたときにリンクの色を変更する方法を知りたいです。
ご提案ありがとうございます。
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>
これはよりきれいです：
ul.nav a:hover { color: #fff !important; }
これ以上具体的にする必要はありません。残念ながら、!importantこの場合は が必要です。
また、アクセシビリティ上の理由と、スマートフォン/タブレット/タッチスクリーン ユーザーのために、同じ宣言に:focusandを追加しました。:active
これを試して、ホバー時にリンクの背景を変更できます
.nav > li > a:hover{
background-color:#FCC;
}
変更する要素をターゲットにし、!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;
}
このようなものがうまくいきました（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-brandのホバー色を変更します。
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: white;
}
したがって、navbad-brandホバーの色が白に変わります。私はそれをテストしたところ、正しく機能しています。
これで十分です：
.nav.navbar-nav li a:hover {
color: red;
}