Как сделать, чтобы курсор в ссылке менял цвет при наведении курсора на ССЫЛКУ?

В моем HTML-коде я создал ссылку на панели навигации, которая при наведении указателя мыши вызывает выпадающее [раскрывающееся] меню:

<a href = "#accomplishments" class = "dropdown-toggle" data-toggle = "dropdown">Dropdown<b class = "caret"></b></a>

А рядом с раскрывающимся списком слов есть курсор, указывающий вниз. Я хочу сделать так, чтобы при достижении курсором любой части «Раскрывающегося списка» курсор менял цвет, а «Раскрывающийся список» оставался своим цветом по умолчанию - по сути, работая так же, как ссылка «Еще» рядом с «Новости» когда вы что-то ищете в Google.

CSS:

.navbar-inverse .navbar-nav > li > a {
color: #ffffff /* text color default (sans active)*/;
}

Этот ^^ имеет дело с белым цветом по умолчанию для всех неактивных ссылок на панели навигации.

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #ffffff; /* flash (sans active) */
background-color: transparent;
}

И это ^^ имеет дело с белым цветом, которым становятся неактивные ссылки при наведении курсора - поэтому они остаются белыми. (И это также относится к ссылке «Раскрывающийся список».)

Первоначально я думал, например, определить "Dropdown" с помощью #link, а затем обработать его отдельно от других ссылок и создать некоторую вложенную структуру, в которую будет помещен код .caret, но я понятия не имею, как это осуществить. - Я с треском провалился.

В любом случае, если кто-нибудь из вас может помочь, я буду бесконечно благодарен !!! Дайте мне знать, если вам нужен другой код, чтобы лучше понять, для чего я собираюсь, или уже есть.

Кстати, я использую Bootstrap 3.2.0.


html css twitter-bootstrap hover caret
person michael    schedule 07.07.2014    source источник
comment
lol @ кто бы ни проголосовал за этот вопрос, пнг   -  person michael    schedule 08.07.2014
comment
В качестве обновления моего кода для всех, кому интересно, вот как это выглядит для выполнения этой задачи: HTML: ‹a href = #accomplishments class = dropdown-toggle data-toggle = dropdown› ‹span› Dropdown ‹/ span ›‹ B class = caret ›‹/b› ‹/a› CSS: диапазон {color: #ffffff; / * font-family: verdana; * /} a: hover * .arrow {color: #bdbcae; } a: активный диапазон, a: активный * .caret {color: #bdbcae; }   -  person michael    schedule 08.07.2014

Ответы (1)


arrow_upward
2
arrow_downward

http://jsfiddle.net/eyjrx/

Это поможет.

HTML:

<a href="#"><span>More</span><span class="arrow">&#6132;</span></a>

CSS:

a span {
    color:grey;
    font-family:verdana;
}
a:hover *.arrow {
    color:black;
}
a:active span, a:active *.arrow {
    color:red;
}
person siabaJS    schedule 07.07.2014