CSS中的伪类悬停答案

【问题标题】：pseudo class hover in CSSCSS中的伪类悬停
【发布时间】：2013-11-10 23:06:53
【问题描述】：

一直在尝试学习 CSS 以及在元素上使用悬停伪类。每当我在导航栏中选择一个选项卡时，背景颜色都会改变颜色（这是我想要的）。但是，当我离开锚文本时，文本会变回白色。

理想情况下，我想要的是当鼠标悬停在导航选项卡上时，将背景颜色变为白色，同时将文本变为黑色。代码如下：

<head>
    <link rel="stylesheet" href="css.css" />
</head>

<body>
    <div id="container">
        <div id="title">
                <h1>Record Store</h1>

        </div>
        <div id="navigation">
            <ul class="navbar">
                <li><a href="#">Home</a>
                </li>
                <li><a href="#">Vinyl Stock</a>
                </li>
                <li><a href="#">Online Offers</a>
                </li>
                <li><a href="#">Collectors News</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</body>

和 CSS 代码：

* {
    border: 0;
    padding: 0;
    margin:0;
}
#container {
    margin: auto;
    width: 800px;
    border: 1px solid black;
    min-height: 600px;
    z-index: -9;
}
#title {
    margin:auto;
    /*border: 1px solid black;*/
    height: 30%;
}
#navigation {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    height: auto;
    overflow: auto;
}
.navbar {
}
.navbar ul {
}
.navbar li {
    font: bold 12px/1.2em Arial, Verdana, Helvetica;
    height: auto;
    list-style: none;
    text-align: center;
    width: 20%;
    float:left;
    background-color: blue;
    padding: 1% 0px;
}
.navbar a {
    border-right: 1px solid #1F5065;
    color: white;
    display: block;
    text-decoration: none;
}
.navbar a:hover {
    color: black;
}
.navbar li:hover {
    background-color: white;
}

有人可以看看并指出我哪里出错了吗？

【问题讨论】：

标签： html css

【解决方案1】：

您只需要更加认真地定义您的选择器。当有人将鼠标悬停在 li 上时，你正在做一件事，而当他们悬停在 a 上时，你正在做另一件事。您想要的是在将鼠标悬停在一个公共元素上时更改这两个元素。

要解决问题，请删除：

.navbar a:hover {
    color: black;
}

并将其替换为：

.navbar li:hover a {
    color: black;
}

jsFiddle

第一个选择器显示“获取所有a:hover 中的.navbar 的子级”，第二个选择器显示“获取所有a 中的子级li:hover 的子级@ 987654330@"

【讨论】：

所以这是否是这样的：如果将鼠标悬停在 .navbar
元素上，将文本颜色更改为黑色？

有趣的是，当您可能正在撰写评论时，我将其添加到我的答案中。它读起来更像是“在 li:hover .navbar 中获取所有 a；应用颜色：黑色；”