悬停时的css/html下拉菜单对我不起作用

我正在尝试用html和css制作一个下拉菜单。我遵循了大量的教程，但它们似乎对我不起作用，我也不明白为什么。我有一个菜单栏，它总是显示在屏幕顶部，我想当你把鼠标悬停在左边的burgermenu时，会显示另一个。这是我当前的代码：

<body>
<div class='menudiv'>
<ul>
<li><a><img class='dropdown' src='burgermenu.png' alt='OpenMenu' height='90px' width="90px" onmouseover="this.src='burgermenuwit.png'" onmouseout="this.src='burgermenu.png'"></a></li>
<li style="float:right"><a href="#login"><img src='pp.png' alt='LogIn' height='90px' width="95px" onmouseover="this.src='ppwit.png'" onmouseout="this.src='pp.png'"></a></li>
</ul>
</div>
<div class='logo'>
<a href="#home"><img src='flowy_logo.png' alt='Logo' height='95px', widht='95px' onmouseover="this.src='flowy_logowit.png'" onmouseout="this.src='flowy_logo.png'">
</div>
<div class='menu2'>
<ul>
<li><a>Meten</a></li>
<li><a>Huidige waardes</a></li>
<li><a>Geschiedenis</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</body>
</html>

和css：

.menudiv ul {
font-family: "Georgia", "Times New Roman", "Serif";
font-size: 25px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(102, 75, 255);
}
.menudiv ul li {
float: left;
cursor: pointer;
}
.menudiv ul li a {
display: block;
padding: 8px;
}
.logo img {
position: relative;
top: -105px;
margin-left: auto;
margin-right: auto;
display: block;
}
.menu2 ul {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
font-size: 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
top: -100px;
}
.menu2 ul li a {
display: block;
width: 200px;
background-color: rgb(102, 75, 255);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.menu2 ul li a:hover {
color: white;
cursor: pointer;
}
.menu2 {
display: none;
}
.dropdown:hover .menu2 {
display: block;
}

有人能告诉我为什么它不起作用吗？

您可以通过监听"mouseover"事件并将menu2的显示样式更改为"inline block"来实现这一点(普通的"block"采用全宽，这对"mouseout"不利(。你必须同时收听触发器("打开菜单"链接(和菜单本身。

要关闭"mouseout"上的菜单，需要更多的代码，然后可以使用小型内联onmouseout处理程序：

首先，您必须检查菜单是否悬停。因此，在从触发器上的"mouseout"关闭菜单之前，您需要一点超时，这样光标就有机会到达菜单
其次，您需要知道，当更改为菜单中的下一个a或li标记时，会触发"mouseout"事件。由于"mouseout"事件的速度快于从a或li标记到包含menu2的下一个"mouseover"事件的事件冒泡速度，因此需要在menu2上为"mouseout"进行第二次超时，以检查它是否仍处于悬停状态
第三，当他离开菜单时，你必须检查光标是否再次悬停在触发器上，否则菜单将保持关闭状态，触发器上的"鼠标悬停"事件不会再次触发。这可以在第二次超时检查中进行检查
第四，您需要将所有这些封装在一个事件处理程序中，该事件处理程序直到加载DOM才执行它。否则，悬停事件侦听器将不起作用，因为在执行脚本时将没有可将侦听器绑定到的元素

对于是否悬停的检查，使用两个变量，在"mouseover"上为true，在"mouseout"上为false。

下面是一个工作示例：

document.addEventListener('DOMContentLoaded', function() {
const menu_trigger = document.querySelector('#menu-trigger');
const menu2 = document.querySelector('.menu2');
var trigger_hovered = false;
var menu2_hovered = false;
menu_trigger.addEventListener('mouseover', function() {
trigger_hovered = true;
menu2.style.display = 'inline-block';
});
menu_trigger.addEventListener('mouseout', function() {
trigger_hovered = false;
setTimeout(function() {
if (menu2_hovered == false) {
menu2.style.display = 'none';
}
}, 10);
});
menu2.addEventListener('mouseover', function() {
menu2_hovered = true;
});
menu2.addEventListener('mouseout', function() {
menu2_hovered = false;
setTimeout(function() {
if (menu2_hovered == false && trigger_hovered == false) {
menu2.style.display = 'none';
}
}, 10);
});
});

* {
margin: 0;
padding: 0;
}
.menudiv ul {
display: flex;
justify-content: space-between;
overflow: hidden;
width: 100vw;
font-size: 25px;
font-family: "Georgia", "Times New Roman", "Serif";
list-style-type: none;
background-color: rgb(102, 75, 255);
}
.menudiv ul li a {
display: block;
padding: 8px;
cursor: pointer;
}
.menu2 {
display: none;
}
.menu2 ul {
list-style-type: none;
font-size: 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.menu2 ul li a {
display: block;
width: 200px;
padding: 10px;
background-color: rgb(102, 75, 255);
}
.menu2 ul li a:hover {
color: white;
cursor: pointer;
}

<div class='menudiv'>
<ul>
<li id="menu-trigger">
<a>Open Menu</a>
</li>
<li><a href="#login">Login</a></li>
</ul>
</div>
<div class='menu2'>
<ul>
<li><a>Meten</a></li>
<li><a>Huidige waardes</a></li>
<li><a>Geschiedenis</a></li>
<li><a>Contact</a></li>
</ul>
</div>

这里有一个JSFiddle，所有内容都已修复：https://jsfiddle.net/dwauq9mL/

由于我没有照片，为了自己的方便，我不得不更改一些东西。

问题：由于menu2不是要在其悬停事件上显示的元素的子级，所以它将不起作用。

解决方案：您需要将menu2放入汉堡菜单的li中。您需要从burger映像中删除.dropdown类，并将其添加到其父li中。

当你这样做的时候，一定会把布局弄得一团糟。我为你写了一个JSFiddle(应该提到(，所有的事情都解决了。

我建议您不要使用浮动，因为它们已被弃用。我去掉了浮子，改为使用flexbox，这是更好的，也是推荐的。我建议你去学习Flexbox。我将在这个答案的末尾链接一些资源。

Flexbox上的CSS技巧文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

学习Flexbox的有趣小游戏：https://flexboxfroggy.com/

下面的代码只有在burgermenu按钮和menu2之间没有空格的情况下才能工作，我建议在menu2div中添加背景色，这样你就可以看到div大小的

<script>
var menu2 = document.querySelector('.menu2');
document.querySelector('.dropdown')
.addEventListener('mouseover', function() {
menu2.style.display = 'block';
});
document.querySelector('.dropdown')
.addEventListener('mouseout', function() {
menu2.style.display = 'none';
});
menu2.addEventListener('mouseover', function() {
menu2.style.display = 'block';
});
menu2.addEventListener('mouseout', function() {
menu2.style.display = 'none';
});
</script>

如果菜单按钮和菜单之间有一些空间，你可以通过添加一些显示时间延迟来管理：没有，我不知道这是否是好方法，但它会起作用。

相关内容

最新更新

热门标签：