Question

我有一个<li>，在悬停时会在其下方显示<ul>。我终于将边框对齐但现在由于某种原因，li:hover颜色在我悬停时不会改变。似乎正在发生的事情是，当<ul>处于活动状态时，父<li>仍会根据CSS继续悬停。

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

当显示<ul>并且父{4}}没有悬停时，我希望父<li>具有相同的背景颜色和<li>的边框颜色{1}}中的{1}}个元素。如何在保持整个<li>的边界完整性的同时最好地解决这个问题？

Answer 1

您可以通过更改

#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/

从：

#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;
}

Answer 2

如果你不反对使用某些jQuery，你可以这样做

$('ul#children').hover(
   function(){
       $(this).parent('li').css('background-color','#CCD9FF');
    },   
    function(){
        $(this).parent('li').css('background-color','');
    } 
);

示例：http://jsfiddle.net/Luryf/1/

Answer 3

这是怎么回事：jsfiddle

我做到了这样#parent li没有环绕ul，改变了一些css，最重要的是，这个：

#nav li:hover + ul, #nav ul ul:hover {
    display:block;
    z-index:100;
}

<强>更新

并添加了这个：

#nav li, #nav ul:hover #parent {
    background-color:#CCD9FF;
}

#nav ul:hover #parent {
border-left: 1px solid #99B3FF;
border-right: 1px solid #99B3FF;
    border-top: 1px solid #99B3FF;
}

在

#nav li#parent:hover { ... }

父母li在下拉列表中不会改变悬停的颜色

3 个答案: