将鼠标悬停在 X 或 Y 上以仅更改 Y 的颜色

Question

我正在制作一个导航栏，其中包含图标和页面标题（例如，家庭图标后跟文本“主页”）。假设我想在使用 :hover 选择器将鼠标悬停在文本或图标本身上时将仅（！）图标的颜色从黑色（默认）更改为蓝色。我怎样才能做到这一点？ （我不想使用 jQuery，只是 CSS） 标记现在是这样的：

<ul id="navbar">
<li class="navgroup">
    <ul>
        <li class="navicon"><i class="icon-home"></i></li>
        <li class="navname">Home</li>
    </ul>
</li>
<li class="navgroup">
    <ul>
        <li class="navicon"><i class="icon-info"></i></li>
        <li class="navname">Information</li>
    </ul>
</li>
<li class="navgroup">
    <ul>
        <li class="navicon"><i class="icon-contact"></i></li>
        <li class="navname">Contact</li>
    </ul>
</li>
</ul>

当然一切都是{display:inline}

Answer 1

将悬停设置为导航组内的 ul。下面的 CSS 就是这样做的，你可以添加任何你喜欢的样式。

http://jsfiddle.net/PQShS/9/

CSS：

.navgroup ul:hover .navicon{
    color:#FFF;
}

你的代码

<ul id="navbar">
<li class="navgroup">
    <ul>
        <li class="navicon"><i class="icon-home"></i></li>
        <li class="navname">Home</li>
    </ul>
</li>
<li class="navgroup">
    <ul>
        <li class="navicon"><i class="icon-info"></i></li>
        <li class="navname">Information</li>
    </ul>
</li>
<li class="navgroup">
    <ul>
        <li class="navicon"><i class="icon-contact"></i></li>
        <li class="navname">Contact</li>
    </ul>
</li>
</ul>

Answer 2

由于归结为当光标悬停在ul 元素上方的任意位置时更改图标的外观，您可以这样做：

.navgroup ul:hover .navIcon .icon-home
{
  /*hover style for the icon*/
}

.navgroup ul .navIcon .icon-home
{
  /*non-hover style for the icon*/
}

Answer 3

您应该使用以下 css：

.navgroup:hover .navicon {
    background-color: blue;
} 

只要您将鼠标悬停在导航组中的任何位置，它就会只修改导航图标

看到这个jsFiddle

Answer 4

你应该使用锚标签

css：

.testing:hover {
    color: red;
}

html：

<a class="testing" href="">
    <span>hello1</span>
    <span style="color:black;">hell2</span>
</a>

将整个样式赋予<a> 标签并将内联样式赋予<a> 标签内您不想更改的其他元素。