当鼠标移到子菜单上时，我希望子菜单保持打开状态答案

【问题标题】：I want the sub-menu to remain open when the mouse moves over it当鼠标移到子菜单上时，我希望子菜单保持打开状态
【发布时间】：2014-02-08 09:17:09
【问题描述】：

我有一个菜单，这个菜单在某些项目中有子菜单。

我使用XHTML + CSS 创建主菜单和子菜单，当用户将鼠标移到具有子菜单的项目上时，我使用native javascript 显示和隐藏子菜单.

当鼠标移动到包含子菜单的项目时，子菜单出现，当鼠标光标移动到子菜单时，子菜单消失。

我想要的是，如果鼠标光标悬停在主菜单中的项目或子菜单中的项目上，子菜单仍然可见

HTML

<div class="box">
<ul>
    <li class="havSub">Item 1
        <div>
            <ul>
                <li> <a href="#"> Sub 1 </a> </li>
                <li> <a href="#"> Sub 2 </a> </li>
            </ul>
        </div>
    </li>
    <li> <a href="#"> Item 2 </a> </li>
    <li> <a href="#"> Item 3 </a> </li>
    <li class="havSub">Item 4
        <div>
            <ul>
                <li> <a href="#"> Sub 1 </a> 
                </li>
                <li> <a href="#"> Sub 2 </a> 
                </li>
            </ul>
        </div>
    </li>
    <li> <a href="#"> Item 5 </a> 
    </li>
</ul>

CSS

.box{width:150px; border:2px solid #ccc; text-align:center; margin-top:50px;}
.box ul {padding:0; margin:0; list-style-type:none;}
.box ul li {margin-bottom:1px; display:block; padding:5px; background-color:#fff000; color:#ff0000; font:bold 20px arial; cursor:pointer;}
.box ul li:hover {background-color:#ffff00; color:#ff0000;}
.box ul li a {display:block; color:#ff0000; font:bold 20px arial; text-decoration:none;}
.box ul li div {position:relative; left:145px; top:-29px; display:none;}
.box ul li div ul {position:absolute;}

Javascript

document.addEventListener('mouseover', function (event) {
    event = (event) ? event : window.event;
    if (event.target.className === 'havSub') {
        event.target.children.item(0).style.display = 'block';
        event.target.addEventListener("mouseout", function () {
            event.target.children.item(0).style.display = 'none';
        });
    }
});

你可以看到JSFiddle demo

【问题讨论】：

为什么不直接使用 jQuery 的菜单就可以了？
您应该在问题本身中包含您的相关代码，以便在 jsFiddle 关闭时它具有价值
@LeeTaylor：比起 jquery，我更喜欢原生 javascript。
不使用javascript怎么样？
@ZachSaucier: using javascript at all，很抱歉，你的话不清楚或者我不明白。

标签： javascript html css menu

【解决方案1】：

您可以很容易地解决这个问题，同时通过使用以下代码消除对 jQuery 的需求

.box ul li:hover * {
    display:block;
}

Demo

它适用于任何支持 CSS2 的浏览器，所以 IE7+

【讨论】：

谢谢，这里*符号是什么意思？
在这种情况下，它表示li 下的所有子代。本质上，它是 CSS“一切”选择器。有关 CSS 选择器的更多信息，请查看this useful article

【解决方案2】：

如果您正在寻找更兼容的解决方案，即服务于 IE6，这里是问题的核心：

子菜单上的链接在主菜单的onmouseout 事件上触发。您可以在 DOM 对象本身上放置一个标志来安排延迟的onmouseout。当在子菜单上检测到onmouseover 事件时，定时器事件被取消。关闭菜单的责任现在转交给子菜单。

$('main').onmouseout=function(){
    this.closing=setTimeout(function(){
        //close the menu here
    },300); //allow enough time to move on to the sub menu
}

$('sub').onmouseover=function(){
    //cancel the closing event
    if ($('main').closing) clearTimeout($('main').closing);

    this.onmouseout=function(){
      //close the menu here
    }
}

【讨论】：