0

我需要你的帮助。

如何修改下面的 CSS 标记，以便在用户选择时呈现白色？就像现在一样，当一个部分被悬停时，除了最后选择的部分之外，文本保持蓝色。请注意，在整个用户选择过程中，蓝色都不是白色。

请看下面的图片：

在此处输入图像描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#navigation {
    width: 150px;
    font-size: 0.75em;
}
#navigation ul {
    margin: 0px;
    padding: 0px;
}

ul.top-level {
    background: rgb(238,238,238);
}

#navigation li {
    list-style: none;
}
ul.top-level li {
    border-bottom: #fff solid;
    border-top: #fff solid;
    border-width: 1px;
}

#navigation a {
    color: rgb(41,83,118);
    cursor: pointer;
    display:block;
    height:25px;
    line-height: 25px;
    text-indent: 10px;                  
    text-decoration:none;
    width:100%;
}
#navigation a:hover{ 
    text-decoration:underline;
        color: #fff;
}
#navigation li:hover {
    background: rgb(85,85,85);
    position: relative;
}

ul.sub-level {
    display: none;
}
li:hover .sub-level {
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 150px;
    top: 0px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:150px; 
}
#navigation .sub-level {
    background: rgb(238,238,238);
}
#navigation .sub-level .sub-level {
    background: rgb(238,238,238);
}

li:hover .sub-level .sub-level {
    display:none;
}

.sub-level li:hover .sub-level {
  display:block;
  position: absolute;
  left: 150px;
}

</style>
</head>
    <body>
        <div id="navigation">
            <ul class="top-level">
                <li><a href="#">Home</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Menu Item 1</a>
                </li>
                        <li>
                            <a href="#">Sub Menu Item 2</a>
                            <ul class="sub-level">
                                <li><a href="#">Sub Sub Menu Item 1</a></li>
                                <li><a href="#">Sub Sub Menu Item 2</a></li>
                                <li><a href="#">Sub Sub Menu Item 3</a></li>
                                <li><a href="#">Sub Sub Menu Item 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Menu Item 3</a></li>
                        <li><a href="#">Sub Menu Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">FAQ</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Menu Item 1</a></li>
                        <li>
                            <a href="#">Sub Menu Item 3</a>
                            <ul class="sub-level">
                                <li><a href="#">Sub Sub Menu Item 1</a></li>
                                <li><a href="#">Sub Sub Menu Item 2</a></li>
                                <li><a href="#">Sub Sub Menu Item 3</a></li>
                                <li><a href="#">Sub Sub Menu Item 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">News</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Menu Item 1</a>
                            <ul class="sub-level">
                                <li><a href="#">Sub Sub Menu Item 1</a></li>
                                <li><a href="#">Sub Sub Menu Item 2</a></li>
                                <li><a href="#">Sub Sub Menu Item 3</a></li>
                                <li><a href="#">Sub Sub Menu Item 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Menu Item 3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>
4

4 回答 4

2

更改#navigation a:hover为#navigation li:hover > a。<a>不是子列表的父级。当您悬停在子列表上时，您将保持悬停在列表上。子选择器 ( >) 是必需的，否则子列表中的所有 a后代都将是白色，这是不可取的。

http://jsfiddle.net/nvEza/

于 2013-08-29T18:15:25.697 回答
1

在 css 的末尾添加以下内容：（工作 jsFiddle）

#navigation li:hover > a{ /* Thanks @ExplosionPills */
    color:white;
}
于 2013-08-29T18:17:20.410 回答
0

我已经在锚点包裹整个子菜单的地方看到了它，如下所示：

<a href="#">
   News
   <ul class="sub-level">
      ...
   </ul>
</a>

这样，当您将鼠标悬停在子菜单上时，父锚点也仍然处于活动状态。

于 2013-08-29T18:15:07.183 回答
-2

使用悬停在父级上将子级颜色设置为该状态。

#navigation .top-level:hover li a{color:#fff;}
于 2013-08-29T18:17:15.790 回答