HTML/CSS按钮hover悬停效果不生效，尝试多种方法仍无法解决

核心原因 #

你当前代码中按钮的hover状态样式和默认状态样式完全一致，所以视觉上没有任何变化，看起来就像hover效果没有触发：

• 默认button样式设置了background-color: #1a64d6、color: white
• hover样式同样设置了background: #1a64d6、color: white
  两者完全没有差异，哪怕你加了transition过渡属性也看不出效果。

修复方法 #

只需要修改button:hover选择器内的属性值，让它和默认状态产生视觉差异即可，下面提供几种常见的hover效果可供选择：

效果1：背景透明+文字变色 #

button:hover {
  color: #1a64d6;
  background: transparent;
  cursor: pointer;
}

效果2：加深背景色+缩小阴影 #

button:hover {
  color: white;
  background: #1553b3;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  cursor: pointer;
}

效果3：按钮轻微放大 #

button:hover {
  color: white;
  background: #1a64d6;
  cursor: pointer;
  transform: scale(1.05);
}

另外你在button的默认样式里重复写了两次display: block;，属于冗余代码，删掉其中一个即可，不影响功能运行。

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