Изменение цвета наведения на навигационных вкладках

Я хочу изменить цвет текста навигационных вкладок hover, поэтому я назвал custom 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;}

и он не работает. Кто-нибудь может мне помочь?

Ответ 1

Вам нужно сделать свой селектор немного более конкретным, чтобы правильно настроить таргетинг на ваши вкладки. Попробуйте следующее:

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

Кстати, это только меняет цвет текста, если вы хотите изменить цвет фона вкладок при наведении указателя на color на background-color.

Ответ 2

Андрес прав насчет специфики. Стиль, который вы хотите переопределить, устанавливается с помощью:

.nav-bar > li > a:hover

Если вы используете LESS с Twitter Bootstrap, переменные уже сделаны для этого:

@navbarLinkColor
@navbarLinkColorHover
@navbarLinkColorActive

Смотрите раздел Navbar в документах.

Ответ 3

Это работает для меня без особой "специфичности", кроме начальной загрузки...

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

Ответ 4

Установить @navbarLinkBackgroundHover