保持：对鼠标悬停效果父母，当鼠标结束时

当鼠标悬停在小孩身上时，我想保持父悬停效果处于活动状态。

我知道我可以使用jQuery？但如果可能的话，我真的想保留在CSS中。

，也不必给所有元素的唯一ID的...

http://forevertan.dk/_temp/eventfest/3/test3.htm

2012-01-11 Christian Bekker

如果你想使用CSS的唯一方式，我强烈建议你，你将不得不稍微改变你的标记。当您沿着子菜单走下去时，当您检查:hover的a的父母（li）a仍然会在:hover上。基本上我们正在做这样的：

ul#nav li > a { 
    /* all the normal state styling here */ 
} 
ul#nav li:hover > a { 
    /* hover state styling here */ 
}

我们将扩大a到li的尺寸。所以li似乎表现得像a。唯一的区别是，li是a和子菜单ul的父项。

JSFiddle here。

HTML保持不变：

<ul id="nav"> 
    <li> 
     <a href="#test">Test</a> 
     <ul> 
      <li> 
       <a href="#test/sub">Sub</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#test">Test</a> 
     <ul> 
      <li> 
       <a href="#test/sub">Sub</a> 
      </li> 
     </ul> 
    </li> 
</ul>

CSS变化：

ul#nav > li { 
    padding: 0; 
    margin: 0; 

    float: left; 
    position: relative; 
} 
ul#nav li > a { 
    height: 30px; 
    min-width: 80px; 
    padding: 0; 
    margin: 0; 
    border-right: 1px solid #CCC; 
    border-left: 1px solid #CCC; 

    display: block; 

    background: #000; 

    color: #FFF; 
    text-align: center; 
    line-height: 30px; 
    white-space: nowrap; 
} 
ul#nav li:hover > a { 
    background: #FFF; 

    color: #000; 
} 
ul#nav > li ul { 
    display: none; 
    position: absolute; 
} 
ul#nav > li:hover ul { 
    display: block; 
} 
ul#nav > li ul li { 
    display: block; 
}.

来源

2012-01-11 19:48:02 buschtoens

只是试着用你做的.. 无法真正让它工作？它行为很奇怪？你能做一个快速工作的例子吗？ – 2012-01-11 20:25:46

添加了JSFiddel。 http://jsfiddle.net/ns2Kd/ – buschtoens 2012-01-11 21:29:42

啊我看到了:)谢谢！ – 2012-01-11 21:39:12

把：悬停选择的li元素上，而不是锚

#navMain li:hover > a{ 
    background-color: black; 
}

http://jsfiddle.net/293mV/

来源

2012-01-11 19:29:47

这并不完全符合他的描述。当父母被徘徊时，这会改变孩子。 – 2012-01-11 19:34:01

我只是补充说这是真的，但IE6的'li：hover'将不起作用。使用IE6时，伪选择器'：hover'仅在'a'元素上有效 – 2012-01-11 19:34:33

@Diodeus：即使鼠标悬停在子节点上，请求也会保留父节点_effect_。通过触发li而不是a，当鼠标悬停在顶层链接_and_上方时，顶层a以鼠标悬停状态显示。这正是被问到的。 – 2012-01-11 19:39:21

您不能使用CSS来实现父项目;你需要使用JavaScript。如果你不喜欢ID，你可以使用jQuery的相对选择器.parent(),.next()等。

来源

2012-01-11 19:30:24

你能举个例子吗？ – 2012-01-11 21:00:55

保持：对鼠标悬停效果父母，当鼠标结束时

回答

相关问题