我正在尝试创建一个按钮下拉列表，仅当鼠标指针悬停在第一个未隐藏的按钮上时才显示，并且当指针不再悬停时离开时，下拉列表消失。 问题是我希望当指针离开初始按钮边界时，当指针悬停在其他按钮上时，其他按钮仍然可见并且不会消失。
注意： 我仍然是 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');
buttonFirstDropdown.addEventListener('click', () => {
firstDropdown.classList.toggle('active');
})
buttonSecondDropdown.addEventListener('click', () => {
secondDropdown.classList.toggle('active');
})body {
font-family: sans-serif;
}
#app {
display: flex;
flex-direction: row wrap;
align-items: flex-start;
}
.dropdown {
width: 200px;
margin: 20px;
}
.dropdown-list {
padding: 0;
margin: 0;
}
.dropdown-item {
cursor: pointer;
padding: 5px;
border: 1px solid #ccc;
}
#first-dropdown, #second-dropdown {
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="dropdown">
<button type="button" class="button-first-dropdown">Open It (1)</button>
<div id="first-dropdown" 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="dropdown">
<button type="button" class="button-second-dropdown">Open It (2)</button>
<div id="second-dropdown" 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>