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

Posted 2023-03-06

【中文标题】下拉菜单中的父 li 不改变悬停时的颜色

【英文标题】：Parent li in dropdown not changing color off hover

【发布时间】：2011-12-10 13:15:22

【问题描述】：

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

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

http://jsfiddle.net/Luryf/

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

【参考方案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;

【讨论】：

这些是唯一的变化？很好的解决方案。没有 jQuery。远远超过公认的答案。 :)

@bozdoz 实际上只需要第一个。第二个变化是因为我觉得它不合适。

当我将鼠标悬停在元素的 <li> 和 <a> 之间时，似乎有些元素发生了变化。例如，将鼠标悬停在 li#parent 上然后悬停在 li#parent a 上会使 ul 向下移动一点。 ul#children 中的 <li> 元素也是如此。

@tvalent2 我已经更新了我的帖子来解决这个问题。我没有像我应该拥有的那样移动所有边框属性，因此父级将拥有漂亮的浅蓝色背景。 jsfiddle.net/Luryf/8 现在应该修复了。

@tvalent2 还有其他各种与边界相关的不一致。我个人认为 css 太复杂了，但 jsfiddle.net/Luryf/9 是一个版本，它们都已修复。

【参考方案2】：

怎么样：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#parent 悬停时，有没有办法让ul#children li 中的元素不缩小一点？一旦你进入<ul> 并将鼠标悬停在它的元素上，它就不会被注意到，但是当你从#parent 切换到#children 时，它就很轻微了。

绝对：将border-bottom 属性添加到#nav ul:hover #parent 选择器。看看：jsfiddle.net/bozdoz/Luryf/7

@bozdoz <ul> 元素内的 <ul> 元素？这是有效的标记吗？

我不这么认为。问问写它的人。

我从 Google 的 html、CSS 和 javascript 中从头开始学习 (code.google.com/edu/submissions/html-css-javascript)。特别是这个视频：youtube.com/watch?v=_mgyfwYKpmQ

【参考方案3】：

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

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

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

【讨论】：

我很高兴@tvalent2！很高兴能提供帮助。