1

我正在制作一个导航栏，该导航栏由后跟页面标题的图标组成（例如，主页图标后跟文本“主页”）。假设我想在使用 :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}

4

4 回答 4

1

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

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

.navgroup ul .navIcon .icon-home
{
  /*non-hover style for the icon*/
}
于 2013-08-01T12:21:48.287 回答
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>
于 2013-08-01T12:27:29.867 回答
1

您应该使用以下 CSS：

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

每当您将鼠标悬停在导航组中的任何位置时，它都会只修改导航图标

看到这个jsFiddle

于 2013-08-01T12:45:07.243 回答
0

你应该使用锚标签

CSS：

.testing:hover {
    color: red;
}

html:

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

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

于 2013-08-01T12:31:37.817 回答