如何实现下拉按钮列表移至子按钮时保持显示状态

你的问题出在事件绑定的对象不对——你把pointerenter/pointerout绑定在了单个的Theme按钮上，当鼠标从Theme按钮移到下拉按钮时，会触发Theme按钮的pointerout事件，直接隐藏所有下拉按钮。

下面给你两种解决方法，适合不同的学习需求：

方法一：纯CSS实现（最简单，无需JS） #

利用CSS的:hover伪类，把整个按钮容器作为交互区域，只要鼠标在容器内，就保持下拉按钮可见：

修改你的CSS代码，替换掉原来下拉按钮的display: none相关样式：

/* 默认隐藏除了Theme之外的所有按钮 */
.btns-container .btns:not(#thBtn) {
  display: none;
}

/* 当容器被悬停时，显示所有下拉按钮 */
.btns-container:hover .btns:not(#thBtn) {
  display: block;
}

然后删除原来的<script>标签内容即可。这种方法不需要写JS，完全靠CSS的父子元素交互实现，非常适合初学者理解布局和伪类的用法。

方法二：JavaScript实现（适合练习JS事件） #

如果想通过JS来实现，需要把事件绑定到整个按钮容器上，并且在pointerout事件中判断鼠标是否真的离开了容器：

修改你的JS代码：

// 获取容器和所有下拉按钮
const btnContainer = document.querySelector('.btns-container');
const dropdownBtns = document.querySelectorAll('.btns:not(#thBtn)');

// 鼠标进入容器时显示下拉按钮
btnContainer.addEventListener('pointerenter', () => {
  dropdownBtns.forEach(btn => btn.style.display = 'block');
});

// 鼠标离开容器时隐藏下拉按钮，先判断是否真的离开容器
btnContainer.addEventListener('pointerout', (e) => {
  // e.relatedTarget 是鼠标移向的元素，如果它不在容器内，才隐藏
  if (!btnContainer.contains(e.relatedTarget)) {
    dropdownBtns.forEach(btn => btn.style.display = 'none');
  }
});

这里的关键是e.relatedTarget，它能帮你判断鼠标是移到了容器内的其他子元素，还是完全离开了容器，只有后者才触发隐藏操作。

修改后的完整代码示例（以CSS方法为例） #

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale= 1.0">
</head>
<style>
    html {
        margin: 0;
        padding: 0;
    }
    header {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        height: 100px;
        width: 100%;
        background-color: red;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        
    }

    .btns-container {
        position: absolute;
        top: 20px;
        margin: 20px;
        padding: 0;
        display: flex;
        flex-direction: column;
        z-index: 1;
    }
    .btns {
        width: 100px;
        height: 30px;
        border: none;
        cursor: pointer;
        margin: 1px;
    }
    #thBtn {
        background-color: #C7C8CC;
        color: #3C3633;
    }
    #thBtn:hover {
        background-color: #3C3633;
        color: #C7C8CC;
    }
    #liBtn {
        background-color: #FFFBF5;
        color: #C3ACD0;
    }
    #liBtn:hover {
        background-color: #C3ACD0;
        color: #FFFBF5;
    }
    #liBtn:active {
        background-color: #FFFBF5;
        color: #C3ACD0;
    }
    #daBtn {
        background-color: black;
        color: white;
    }
    #daBtn:hover {
        background-color: white;
        color: black;
    }
    #daBtn:active {
        background-color: black;
        color: white;
    }
    #naBtn {
        background-color: #0C359E;
        color: #F6F5F5;
    }
    #naBtn:hover {
        background-color: #F6F5F5;
        color: #0C359E;
    }
    #naBtn:active {
        background-color: #0C359E;
        color: #F6F5F5;
    }

    /* 新增的下拉控制样式 */
    .btns-container .btns:not(#thBtn) {
        display: none;
    }
    .btns-container:hover .btns:not(#thBtn) {
        display: block;
    }
</style>
<body>
    <header>
    <div class="btns-container">
        <button id="thBtn" class="btns">Theme</button>
        <button id="liBtn" class="btns">Light</button>
        <button id="daBtn" class="btns">Dark</button>
        <button id="naBtn" class="btns">Navy</button>
    </div>
    </header>
    <main>
        <div style="background-color: aqua; width: 300px; height: 300px;"></div>
    </main>
</body>
</html>

内容的提问来源于stack exchange，提问作者Tana