onmouseover 在两个 div 内

发布于 2025-01-04 19:00:28 字数 974 浏览 2 评论 0原文

我想用 JavaScript 制作一个多级菜单。问题是，当我使用 mousover 事件显示第一个 div 时，我希望保持第一个 div 的显示并导航它以显示第二个 div。

我可以在嵌套 div 上放置 mouseother 事件吗？这是我想做的：

function show_menu(nom_menu){

document.getElementById('ss_menu_marque').style.display='none';

document.getElementById(nom_menu).style.display='block';
}
                                
function hide_menu(nom_menu){
document.getElementById(nom_menu).style.display='none';
}
                                
    function hide_menus_tous(){
    document.getElementById('ss_menu_marque').style.display='none';
    }
<a href="marque.php" onmouseover="show_menu('ss_menu_marque');">
    
<div id="ss_menu_marque" onmouseover="show_menu('ss_menu_marque');" 
onmouseout="hide_menu('ss_menu_marque');">
    

<div id="ss_menu_marque2" onmouseover="show_menu('ss_menu_marque3');" 
onmouseout="hide_menu('ss_menu_marque');">          
            
</div>
</div

原文

I would like to make a multi level menu with JavaScript.
The problem is when I display the first div with the mousover event I wish to keep the first div displayed and navigate though it to display the second div.

Can I put a mouseother event on nested divs ?
Here is what I wish to do:

function show_menu(nom_menu){

document.getElementById('ss_menu_marque').style.display='none';

document.getElementById(nom_menu).style.display='block';
}
                                
function hide_menu(nom_menu){
document.getElementById(nom_menu).style.display='none';
}
                                
    function hide_menus_tous(){
    document.getElementById('ss_menu_marque').style.display='none';
    }
<a href="marque.php" onmouseover="show_menu('ss_menu_marque');">
    
<div id="ss_menu_marque" onmouseover="show_menu('ss_menu_marque');" 
onmouseout="hide_menu('ss_menu_marque');">
    

<div id="ss_menu_marque2" onmouseover="show_menu('ss_menu_marque3');" 
onmouseout="hide_menu('ss_menu_marque');">          
            
</div>
</div

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉生梦死 2025-01-11 19:00:28

这就是使用嵌套 div 实现此目的的方法：

<html>
<head>
<script type="text/javascript">
function show_menu(nom_menu) {
    document.getElementById(nom_menu).style.display='block';
}

function hide_menu(nom_menu){
    document.getElementById(nom_menu).style.display='none';
}
</script>
</head>
<body>
<div id="ss_menu_marque_root" onmouseover="show_menu('ss_menu_marque_1');" onmouseout="hide_menu('ss_menu_marque_1');">
    <a href="marque.php">Menu marque 1</a>
    <div id="ss_menu_marque_1" style="display: none">
        <div onmouseover="show_menu('ss_menu_marque_11');" onmouseout="hide_menu('ss_menu_marque_11');">
            Menu marque 11
            <div id="ss_menu_marque_11" style="display: none">
                <div onmouseover="show_menu('ss_menu_marque_111');" onmouseout="hide_menu('ss_menu_marque_111');">
                    Menu marque 111
                </div>
            </div>
        </div>
        <div onmouseover="show_menu('ss_menu_marque_12');" onmouseout="hide_menu('ss_menu_marque_12');">
            Menu marque 12
            <div id="ss_menu_marque_12" style="display: none">
                <div onmouseover="show_menu('ss_menu_marque_121');" onmouseout="hide_menu('ss_menu_marque_121');">
                    Menu marque 121
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

当鼠标移到不同的菜单级别上时，您可以简单地显示和隐藏不同的菜单级别，而较高级别的菜单保持可见。

This is how you can do it with nested divs:

<html>
<head>
<script type="text/javascript">
function show_menu(nom_menu) {
    document.getElementById(nom_menu).style.display='block';
}

function hide_menu(nom_menu){
    document.getElementById(nom_menu).style.display='none';
}
</script>
</head>
<body>
<div id="ss_menu_marque_root" onmouseover="show_menu('ss_menu_marque_1');" onmouseout="hide_menu('ss_menu_marque_1');">
    <a href="marque.php">Menu marque 1</a>
    <div id="ss_menu_marque_1" style="display: none">
        <div onmouseover="show_menu('ss_menu_marque_11');" onmouseout="hide_menu('ss_menu_marque_11');">
            Menu marque 11
            <div id="ss_menu_marque_11" style="display: none">
                <div onmouseover="show_menu('ss_menu_marque_111');" onmouseout="hide_menu('ss_menu_marque_111');">
                    Menu marque 111
                </div>
            </div>
        </div>
        <div onmouseover="show_menu('ss_menu_marque_12');" onmouseout="hide_menu('ss_menu_marque_12');">
            Menu marque 12
            <div id="ss_menu_marque_12" style="display: none">
                <div onmouseover="show_menu('ss_menu_marque_121');" onmouseout="hide_menu('ss_menu_marque_121');">
                    Menu marque 121
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

You can simply show and hide different menu levels as your mouse moves over them, while the higher level menus stay visible.

回复收藏 0 原文

~没有更多了~