twitter-bootstrap - ナビゲーションタブのホバーカラーを変更する

Question

ホバーnav-tabsのテキストの色を変更したいので、：nav nav-tabs customという名前を付けたので、ビューのコードは次のようになります。

      <li class="active"><%= link_to "Overview", '#'  %>           
      </li>
      <li><%= link_to "About",    '#' %></li>
      <li><%= link_to "What we do", '#' %></li>
      <li><%= link_to "Partners", '#' %></li>
      <li><%= link_to "Contact", '#' %></li>
      <li><%= link_to "Support", '#' %></li>
    </ul>

そして私のcustom.css.scssのコード

.custom a:hover {color: black;}

そしてそれは動作しません。誰かが私を助けることができますか？

Answer 1

タブを適切にターゲットにするには、セレクターをもう少し具体的にする必要があります。これを試して：

.custom > li > a:hover {
    color: black;
}

ちなみに、これはテキストの色のみを変更します。ホバー時にタブの背景色を変更する場合は、そのcolorプロパティをに切り替えますbackground-color。

Answer 2

Andresはその特異性について正しいです。オーバーライドするスタイルは次のように設定されます。

.nav-bar > li > a:hover

Twitter BootstrapでLESSを使用している場合、これのためにすでに作成された変数があります。

@navbarLinkColor
@navbarLinkColorHover
@navbarLinkColorActive

ドキュメントのNavbarセクションを参照してください。

Answer 3

これは、デフォルトのブートストラップ以外の「特異性」がなくても機能します...

ul.nav > li > a:hover {
	background-color: #000000;
	color: #FFFFFF;
	border-style: none;
}

Answer 4

@navbarLinkBackgroundHoverを設定します