如何移除Bootstrap按钮的悬停效果？

问题出在你只覆盖了按钮的默认状态样式，但Bootstrap给按钮的:hover伪类单独设置了样式，所以悬停时还是会触发自带的效果。要彻底移除它，你需要明确覆盖悬停状态的样式，让它和默认状态保持一致。

修改后的CSS代码 #

.btn-dark {
  min-width: 100px;
  background-color: black;
  color: white;
  border-radius: 1px;
  text-decoration: none;
  opacity: 1.0;
  box-shadow: none;
  border: none; /* 覆盖Bootstrap默认的边框样式 */
}

/* 重点：覆盖悬停状态的样式 */
.btn-dark:hover {
  background-color: black; /* 和默认背景色一致 */
  color: white; /* 和默认文字色一致 */
  border-color: black; /* 边框色也保持一致（如果需要） */
  box-shadow: none;
  opacity: 1.0;
}

额外注意点 #

你的按钮还加了hvr-pulse类，这是Hover.css的动画类，它也会带来悬停时的脉冲缩放效果。如果这个不是你想要的，要么直接从HTML的class里删掉hvr-pulse，要么再加一段CSS覆盖它的动画：

.hvr-pulse:hover {
  transform: none;
  animation: none;
}

最后确认一下你的自定义CSS文件是在Bootstrap CSS之后引入的，这样你的样式优先级才会高于Bootstrap的默认样式，覆盖才能生效。

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