Question

所以，我的网站上有一个主菜单栏，下面有一个“子菜单”栏。子菜单栏目前根本没有链接到主菜单栏（我的意思是，在任何页面上，子菜单栏都是相同的。）

这就是它的样子： enter image description here （对于丑陋的绘画技巧感到抱歉）

无论如何，当你将鼠标悬停在主菜单的一个大按钮上时，我正试图让子菜单栏中的链接发生变化。

这是我在html中尝试的内容：

<div id = 'nav'>

    <div id = 'hovermenu1'>
        <a href="/accueil"><div class = 'button-accueil'></div></a>
            <div id = 'menu1'>  
                    <a href="">Link 1</a>

                    <a href="">Link 2</a>

                    <a href="">Link 3</a>

            </div>
    </div>

    <div id = 'hovermenu2'>
        <a href="/guide"><div class = 'button-guide'></div></a>
            <div id = 'menu2'>  
                    <a href="">Link 1</a>

                    <a href="">Link 2</a>

                    <a href="">Link 3</a>

            </div>
    </div>

    [...] <!-- And we go on like this until hovermenu6 -->


    <div id = 'hovermenu6'>
        <a href="/support"><div class = 'button-contact'></div></a>
            <div id = 'menu6'>  
                    <a href="">Link 1</a>

                    <a href="">Link 2</a>

                    <a href="">Link 3</a>

            </div>
    </div>
</div>

在我的CSS中：

#menu1 {
    background:url(/images/menu.jpg) no-repeat left top;
    text-align:center;
    display:none;
    float:left;
    margin-left:16px;
    margin-top:2px;
    padding-top:9px;
    width:700px;
    height:33px;
}

#menu2 {
    background:url(/images/menu.jpg) no-repeat left top;
    text-align:center;
    display:none;
    float:left;
    margin-left:16px;
    margin-top:2px;
    padding-top:9px;
    width:700px;
    height:33px;
}

    [...] /* And we go on like this until menu6 */


#menu6 {
    background:url(/images/menu.jpg) no-repeat left top;
    text-align:center;
    display:none;
    float:left;
    margin-left:16px;
    margin-top:2px;
    padding-top:9px;
    width:700px;
    height:33px;
}


#hovermenu1:hover #menu1 {
    display: inline;
}

#hovermenu2:hover #menu2 {
    display: inline;
}


    [...] /* And we go on like this until hovermenu6 */



#hovermenu6:hover #menu6 {
    display: inline;
}

遗憾的是，这不起作用当我没有关闭所有div id="hovermenu1/2/3/4/5/6并将它们全部关闭在底部但我仍然无法正常工作时，我发现它有点起作用。当您悬停第6个按钮时，它会认为您正在悬停所有按钮并尝试显示所有菜单。

你能帮我解决一下我做错了什么以及如何解决这个问题吗？

非常感谢你，如果有人能帮助我的话。我被困在这件事上一段时间了！问候，
Orangow。

Answer 1

我只想你的HTML，而不是试图将主要按钮与子菜单联系起来。这不是必需的。您只需为每个子菜单创建一个div，并隐藏除活动之外的所有子菜单。然后使用JavaScript捕获每个主菜单项的悬停事件，并根据需要隐藏/显示子菜单。例如：

<div id="main1">Button</div><div id="main2">Button2</div><div id="main3">Button3</div>
<div id="sub1" style="display:none;"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div>
<div id="sub2" style="display:none;"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div>
<div id="sub3" style="display:none;"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div>

<script>
$(document).ready(function(){
   $('#main1').hover(function(){ $('#sub1').show(); $('#sub2').hide(); $('#sub3').hide(); }, 
                     function(){ $('#sub1').hide(); }
   $('#main2').hover(function(){ $('#sub2').show(); $('#sub1').hide(); $('#sub3').hide(); }, 
                     function(){ $('#sub2').hide(); }
   $('#main3').hover(function(){ $('#sub3').show(); $('#sub2').hide(); $('#sub1').hide(); }, 
                     function(){ $('#sub3').hide(); }
});
</script>

这有点邋-，但希望它有意义并让你感动。

悬停主菜单按钮时链接是否更改？

1 个答案: