我正在尝试创建一个按钮下拉列表，仅当鼠标指针悬停在第一个未隐藏的按钮上时才显示，并且当指针不再悬停时离开时，下拉列表消失。 问题是我希望当指针离开初始按钮边界时，当指针悬停在其他按钮上时，其他按钮仍然可见并且不会消失。
注意： 我仍然是 JavaScript 的初学者，所以请不要评判我解释问题或编码的方式。我仍在学习，希望我会变得更好。
代码：
const themeBtn = document.getElementById("thBtn");
const lightBtn = document.getElementById("liBtn");
const darkBtn = document.getElementById("daBtn");
const navyBtn = document.getElementById("naBtn");
themeBtn.addEventListener('pointerenter', () => {
lightBtn.style.display = "block";
darkBtn.style.display = "block";
navyBtn.style.display = "block";
});
themeBtn.addEventListener("pointerout", () => {
lightBtn.style.display = "none";
darkBtn.style.display = "none";
navyBtn.style.display = "none";
});
我尝试了pointerup和pointerdown，但仍然不起作用。
嗨，塔娜，欢迎来到 stackoverflow
我已经为您尝试了一些方法，您可以在下面找到 让我知道你的想法！ （如果您对我的回答满意，请点赞）
这不是最好的方法，我采取了一些捷径，但在更好的上下文中，您应该使下拉列表生成动态并管理要在 JavaScript 端的下拉列表中显示的数据的生成。这会更干净、更易于维护。
当您失去第一个按钮的焦点时，该元素将关闭，否则只要您位于按钮的上下文中，它就会始终保持打开状态。
const buttonFirstDropdown = document.querySelector(".button-first-dropdown");
const buttonSecondDropdown = document.querySelector(".button-second-dropdown");
const firstDropdown = document.querySelector('.first-dropdown');
const secondDropdown = document.querySelector('.second-dropdown');
const dropdownFirstDropdown = firstDropdown.querySelector('.dropdown-list');
const dropdownSecondDropdown = secondDropdown.querySelector('.dropdown-list');
buttonFirstDropdown.addEventListener('mouseover', (event) => {
dropdownFirstDropdown.classList.add('active');
})
buttonSecondDropdown.addEventListener('mouseover', (event) => {
dropdownSecondDropdown.classList.add('active');
})
document.body.addEventListener('mouseleave', () => {
dropdownFirstDropdown.classList.remove('active');
dropdownSecondDropdown.classList.remove('active');
})body {
font-family: sans-serif;
}
#app {
display: flex;
flex-direction: row wrap;
align-items: flex-start;
}
.dropdown {
width: 100px;
margin: 20px;
}
.dropdown-list {
padding: 0;
margin: 0;
}
.dropdown-item {
cursor: pointer;
padding: 5px;
border: 1px solid #ccc;
}
.first-dropdown.dropdown .dropdown-list,
.second-dropdown.dropdown .dropdown-list {
height: 0;
overflow: hidden;
}
.first-dropdown .dropdown-list.active,
.second-dropdown .dropdown-list.active {
height: 100%;
overflow: auto;
}<!DOCTYPE html>
<html>
<head>
<title>JavaScript Sandbox</title>
<link rel="stylesheet" href="styles.css" />
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<div class="first-dropdown dropdown">
<button type="button" class="button-first-dropdown">Open It (1)</button>
<div class="dropdown-list">
<!-- You can dynamically generate your list here -->
<div class="dropdown-item">Element 1</div>
<div class="dropdown-item">Element 2</div>
<div class="dropdown-item">Element 3</div>
</div>
</div>
<div class="second-dropdown dropdown">
<button type="button" class="button-second-dropdown">Open It (2)</button>
<div class="dropdown-list">
<!-- You can dynamically generate your list here -->
<div class="dropdown-item">Element 1</div>
<div class="dropdown-item">Element 2</div>
<div class="dropdown-item">Element 3</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>