Mousedown/Mouseup事件覆盖Mouseenter/Mouseleave事件问题求助

你遇到的问题是因为通过 JavaScript 设置的内联样式优先级高于 CSS 中的 :hover 伪类。当触发 mousedown 事件后，按钮元素被添加了内联的 background-color 样式，后续即使鼠标悬停，CSS 的 :hover 规则也无法覆盖这个内联样式，导致 hover 效果失效。

改用 CSS 类来管理按钮的状态，而不是直接设置内联样式。这样可以通过 CSS 优先级规则正确处理不同状态的样式冲突，同时保留 hover 效果。

修改后的代码 #

HTML（保持不变） #

<div class="shoot">
    Shoot
</div>

CSS #

.shoot {
    width:200px;
    padding-top:20px;
    height:40px;
    font-size:18px;
    background-color:#d3d3d3;
    border-radius:30px;
    font-family:Semi-Casual;
    color:white;
    text-align:center;
    margin:auto;
    cursor:pointer; /* 把cursor移到基础样式里，避免重复 */
}
/* 仅当按钮未处于按下状态时应用hover效果 */
.shoot:hover:not(.pressed) {
    background-color:#c3c3c3;
}
/* 按下状态的样式 */
.shoot.pressed {
    background-color:dodgerblue;
}

JavaScript #

let button = document.querySelector(".shoot");

button.addEventListener("mousedown", () => {
    button.classList.add("pressed");
});

// 鼠标松开时移除按下状态
button.addEventListener("mouseup", () => {
    button.classList.remove("pressed");
});

// 鼠标离开按钮区域时也移除按下状态（避免按住按钮移开后样式卡住）
button.addEventListener("mouseleave", () => {
    button.classList.remove("pressed");
});

为什么这样有效 #

1. 使用 CSS 类管理状态，避免了内联样式的高优先级冲突。
2. 通过 :hover:not(.pressed) 确保 hover 效果仅在按钮未被按下时生效。
3. 增加 mouseleave 事件监听，处理用户按住按钮后移开鼠标的边界情况，保证样式能正确恢复。

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