html - 将鼠标悬停在 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>