javascript - 我希望子菜单在鼠标移到它上面时保持打开状态

Question

我有一个菜单，这个菜单在某些元素中有子菜单。

我使用 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

Answer 1

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

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

Demo

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