下拉菜单中的父 li 不改变悬停时的颜色

2022-01-22 00:00:00 hover navigation html css

我有一个 <li>，在悬停时会在其下方显示一个 <ul>.我终于对齐了边框，但现在由于某种原因，当我将鼠标悬停在它上面时，li:hover 颜色不会变回来.似乎正在发生的是，当 <ul> 处于活动状态时，父 <li> 根据 CSS 保持悬停.

I have an <li> that on hover shows a <ul> beneath it. I finally got the borders aligned but now for some reason the li:hover color won't change back when I hover off of it. What seems to be happening is that when the <ul> is active the parent <li> remains hovered according to CSS.

这是一个显示正在发生的事情的 jsFiddle:

Here's a jsFiddle showing what's going on:

http://jsfiddle.net/Luryf/

当 <ul> 显示并且父 <li> 没有被悬停时，我想要父 <li> 具有与 <ul> 中的 <li> 元素相同的背景颜色和边框颜色.如何在保持整个 <div> 的边框完整性的同时最好地解决这个问题?

When the <ul> is showing and the parent <li> isn't being hovered over, I'd like the parent <li> to have the same background color and border color of the <li> elements within the <ul>. How can I best fix this while maintaining the border integrity of the entire <div>?

推荐答案

你可以通过改变

#nav li#parent:hover {

到

#nav li#parent a:hover {

你也可以这样写:

#nav li#parent:hover {
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

为了让它看起来一致.http://jsfiddle.net/Luryf/4/

更新: 哎呀.似乎还需要将 border-* 和 border-radius-* 移动到它自己的位置.(从 parent 到 parent a)http://jsfiddle.net/Luryf/8/

update: whoops. Seems also needed to move the border-* and border-radius-* into its own. (from parent to parent a) http://jsfiddle.net/Luryf/8/

来自:

#nav li#parent{
    background-color:#FFF;
    border-top-right-radius:5px 5px;
    border-top-left-radius:5px 5px;
    -moz-border-top-left-radius:5px 5px;
    -moz-border-top-right-radius:5px 5px;
    -webkit-border-top-left-radius:5px 5px;
    -webkit-border-top-right-radius:5px 5px;
    border-top:1px solid #FFF;
    border-right: 1px solid #FFF;
    border-left:1px solid #FFF;
}

#nav li#parent:hover{
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

到:

#nav li#parent {
    background-color:#FFF;
}
#nav li#parent a {
    border-top-right-radius:5px 5px;
    border-top-left-radius:5px 5px;
    -moz-border-top-left-radius:5px 5px;
    -moz-border-top-right-radius:5px 5px;
    -webkit-border-top-left-radius:5px 5px;
    -webkit-border-top-right-radius:5px 5px;
    border-top:1px solid #FFF;
    border-right: 1px solid #FFF;
    border-left:1px solid #FFF;
}

#nav li#parent:hover a {
    background-color:#CCD9FF;
    border-color: #99B3FF;
}

相关文章