html - 当 LINK 悬停时，如何使链接中的插入符号改变颜色？

Question

在我的 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;
}

这^^处理白色是非事件链接在悬停时变成的颜色 - 因此它们保持白色。 (这也适用于“下拉”链接。)

我最初的想法是通过#link 定义“Dropdown”，然后将其与其他链接分开处理，并创建一些嵌套结构，其中将放置 .caret 代码，但我不知道如何成功了 - 我惨败了。

无论如何，如果你们中的任何人能提供帮助，我将永远感激!!!让我知道您是否需要其他一些代码来更好地理解我想要或已经拥有的东西。

顺便说一句，我正在使用 Bootstrap 3.2.0。

Answer 1

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;
}