我现在有了基本的,普通的菜单树,如下所示：
- <ul id="nav">
- <li>
- <a href="#">home</a>
- <div class="controls">Some controls go here</div>
- <ul>
- <li>
- <a href="#">item 1</a>
- <div class="controls">Some controls go here</div>
- </li>
- <li>
- <a href="#">item 2</a>
- <div class="controls">Some controls go here</div>
- </li>
- </ul>
- </li>
- </ul>
具有“控件”类的div隐藏起来.我想要发生的是,当你将鼠标悬停在li上时,各个li的控件显示(当你移开鼠标时,它们会再次隐藏).当您将鼠标悬停在其中一个嵌套的li上时会出现问题,它也会显示它的父控件.这是我正在使用的jQuery：
- $("#nav li").hover(
- function() {
- $(".controls:first",this).css("display","block");
- },function() {
- $(".controls:first","none");
- }
- );
谢谢你的帮助.
雷米
解决方法
尝试在悬停功能中停止事件传播,以防止事件冒泡到父级.如果您的“悬停”元素靠得很近,您可能还需要查看
hoverIntent插件来解决“闪烁”悬停效果的问题.
- $("#nav li").hover(
- function(e) {
- e.stopPropagation();
- $(".controls:first","none");
- }
- );
