父级li在下拉菜单中不改变颜色悬停 [英] Parent li in dropdown not changing color off hover

问题描述

我有一个< li> ，悬停时在其下显示< ul> 我终于得到了边界对齐，但现在由于某种原因， li：hover 颜色不会改变回来，当我悬停它。看起来发生的是当< ul> 是活动的时，父 c>< 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> 元素具有相同的背景颜色和边框颜色; ; 。如何最好地解决这个问题，同时保持整个< 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/

更新： whoops。似乎还需要将 border - * 和 border-radius - * 移动到自己的。 （从父到父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;
}

这篇关于父级li在下拉菜单中不改变颜色悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！