网站Hover效果失效但键盘导航正常，寻求技术解决方案

以下是针对该问题的排查和解决步骤：

1. 排查CSS优先级冲突 #

你的hover样式大概率被更高优先级的CSS规则覆盖了。可以通过以下方式验证并修复：

• 给hover选择器提升优先级，明确指定元素类型：

a.get:hover {
  filter: brightness(1.4);
}
a.watch:hover {
  background-color: #fff;
  color: #000;
}
a.login:hover {
  background-color: #fff;
  color: #000;
}

• 临时使用!important测试是否是优先级问题（仅用于排查，不建议长期使用）：

.get:hover {
  filter: brightness(1.4) !important;
}

2. 检查元素是否被遮挡 #

你的.login元素使用了负margin（margin-top: -9rem），非常容易被上方的其他元素遮挡，导致鼠标无法触发hover事件。可以：

• 添加临时轮廓线排查遮挡情况：

.login {
  outline: 2px solid red; /* 临时添加，查看元素是否被覆盖 */
}

• 如果确认被遮挡，给元素添加定位和z-index确保它在顶层：

.login {
  position: relative;
  z-index: 10;
}

3. 确认指针事件未被禁用 #

检查你的按钮元素或其父元素是否设置了pointer-events: none;，这个属性会禁用所有鼠标交互，但不会影响键盘导航，完全符合你的症状。如果存在该属性，直接移除即可。

4. 强制刷新浏览器缓存 #

有时候浏览器缓存会导致新修改的样式不生效，按下Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，再测试hover效果。

你提供的代码参考： #

CSS代码

.login {
  width: 6em;
  height: 2.5em;
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  display: flex;
  font-size: 15px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  transition: all 200ms linear;
  float: right;
  margin-top: -9rem;
  margin-right: 3rem;
}

.login:hover {
  background-color: #fff;
  color: #000;
}

.login:focus {
  background-color: #fff;
  color: #000;
}

.get {
  width: 10em;
  height: 3.3em;
  background-color: #0072D1;
  color: #E4E4E5;
  border: 1px solid #0072D1;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  transition: all 200ms linear;
}

.get:hover {
  filter: brightness(1.4);
}

.get:focus {
  filter: brightness(1.4);
}

.watch {
  width: 7.5em;
  height: 3.3em;
  background-color: #000;
  color: #E4E4E5;
  border: 1px solid #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  transition: all 200ms linear;
}

.watch:hover {
  background-color: #fff;
  color: #000;
}

.watch:focus {
  background-color: #fff;
  color: #000;
}

HTML代码

<div class="buttons">
  <a href="/" class="get">GET DISNEY-</a>
  <a href="/" class="watch">TRAILER</a>
</div>

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