如何实现hover时隐藏.dwBtn类按钮 现有CSS写法不生效如何解决

问题核心原因 #

你用.dwBtn:hover控制元素本身隐藏的逻辑本身存在冲突：当鼠标移入按钮触发hover规则后，元素一旦被设为display: none就会直接从文档流中移除，此时鼠标已经没有悬停在目标元素上，hover状态立刻失效，元素又会重新显示，最终表现就是要么按钮反复闪烁，要么浏览器判定状态切换频率过高直接不生效，看起来就像代码没起作用。

opacity: 0也不生效的排查步骤 #

如果修改为opacity: 0依旧没有效果，按下面的顺序排查：

• 先确认你的CSS样式被正确加载：给.dwBtn的基础样式临时加一行background: red，刷新页面看按钮背景是否变红，要是没变红就是样式文件没引入、路径写错或者有语法错误打断了后面的样式加载
• 检查是否有更高优先级的规则覆盖了你的hover样式：打开浏览器F12开发者工具，选中目标按钮，在样式面板的「伪类」区域手动勾选:hover强制触发悬停状态，看你写的hover规则有没有被划横线，被划横线就说明被其他规则覆盖了，要么提升你当前规则的优先级，要么删掉冲突的规则
• 检查你的CSS语法有没有拼写错误：确认选择器是.dwBtn:hover，没有多打空格、错写类名的情况

正确实现方式 #

如果需要鼠标悬停后按钮稳定隐藏不回弹，给按钮加一个同级父容器，通过父容器的hover状态控制子按钮隐藏即可：

示例代码

HTML：

<div class="dwBtnWrapper">
  <button class="dwBtn">Test</button>
</div>

CSS：

/* 父容器尺寸和按钮保持一致即可 */
.dwBtnWrapper {
  width: 100%;
}

.dwBtn {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: rgb(0, 180, 0);
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

/* 悬停父容器时隐藏子按钮，父容器始终存在，hover状态不会中断 */
.dwBtnWrapper:hover .dwBtn {
  display: none;
  /* 如果需要按钮隐藏后还占据原来的位置，就用 opacity: 0; 替换上面的display规则 */
}

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