如何让:not(:hover)伪类在页面加载或刷新时不触发

要实现按钮加载时不显示红色，仅在鼠标至少悬停一次并离开后才变红，仅靠CSS无法完成——因为CSS无法追踪元素是否被hover过的历史状态，需要结合JavaScript实现：

实现步骤 #

1. 调整CSS样式
   初始状态不给按钮设置红色背景，仅当按钮拥有自定义类（比如has-been-hovered）且未被hover时，才应用红色背景：

   .test:hover {
     background-color: yellow;
   }
   /* 仅当按钮被hover过一次后，未hover状态才显示红色 */
   .test.has-been-hovered:not(:hover) {
     background-color: red;
   }
   

2. 添加JavaScript逻辑
   监听按钮的mouseleave事件，第一次触发时给按钮添加has-been-hovered类，标记该按钮已经被hover过：

   <button class="test">hello</button>
   <script>
     const btn = document.querySelector('.test');
     btn.addEventListener('mouseleave', function() {
       // 只需添加一次类即可
       this.classList.add('has-been-hovered');
     });
   </script>
   

原理说明 #

• 页面加载时，按钮没有has-been-hovered类，所以.test.has-been-hovered:not(:hover)的样式不会生效，按钮保持默认背景。
• 当鼠标第一次悬停按钮再离开时，mouseleave事件触发，给按钮添加类，之后只要按钮不在hover状态，就会显示红色背景；hover时依然显示黄色。

内容的提问来源于stack exchange，提问作者黃柏瑋