Question

我在创建的下拉菜单中遇到了困难。如果我转到任何主列表项并将鼠标移开，主列表项将返回其本机状态。

我为它创建了一个小提琴https://jsfiddle.net/7wmqdxv1/以显示正在发生的事情。

返回黑色的列表项是：

<li><a href="myaccount.php">Manage</a>
<li><a href="">Reports</a>

等

当您将鼠标移到显示的下拉列表中时，我希望主列表项保持白色。我已经将列表的悬停颜色更改为白色，但是我无法使其工作。

有什么想法吗？

Answer 1

如果我理解正确，您必须将悬停声明从a移至li

.signInBar li:hover a {
    color: #ffffff;
}
.signInBar li:hover a{
    background-color: #282828;
    -o-transition:color .4s ease-out, background .3s ease-in;
    -ms-transition:color .4s ease-out, background .3s ease-in;
    -moz-transition:color .4s ease-out, background .3s ease-in;
    -webkit-transition:color .4s ease-out, background .3s ease-in;
    /* ...and now for the proper property */

transition:color .4s ease-out, background .3s ease-in;

}

JSfiddle Demo

Answer 2

在CSS中，您有以下规则：

.signInBar li a:hover {
    color: #ffffff;
}

将选择器更改为以下内容，它将起作用。（demo）

.signInBar li:hover > a {
    color: #ffffff;
}

子菜单项是li的子项，但不是a的子项，因此当您将鼠标悬停在子菜单项上时，您不再在{{1}上徘徊} item，但你仍然在a上徘徊。此处使用直接后代选择器（li）来确保规则仅应用于之前应用的相同范围，但如果您希望该规则应用于所有子链接，则可以将其删除主导航>条目。

Answer 3

将以下代码更改为您的css

.signInBar li:hover a {
    color: #ffffff;
}

而不是

.signInBar li a:hover {
    color: #ffffff;
}

当您将鼠标悬停在下拉列表中时，光标就会出现您的<a>标记。这就是你需要:hover状态的原因 <li>代码

无法下拉所选择的li以保持悬停状态

3 个答案: