如何删除引导按钮悬停效果？答案

【问题标题】：How can I remove a bootstrap buttons hover effect?如何删除引导按钮悬停效果？
【发布时间】：2021-02-20 01:37:20
【问题描述】：

我接到了一项任务，要移除以下按钮的悬停效果：

访问http://www.appsbayou.se，搜索文本“Kontaktinformation”。在它上面有一个按钮，“Sicka”，它有一个丑陋的黑色悬停效果。此样式来自现有的 css。

我使用的是 Chrome，即使我打开 Devtools，我也无法确定产生这种效果的样式规则。

如何移除这个黑色悬停颜色或至少将其更改为我选择的颜色？

【问题讨论】：

要解决此问题，请将背景颜色设置为悬停时按钮渐变的底部颜色，例如 &:hover { background-color:""}

标签： css twitter-bootstrap

【解决方案1】：

您需要在开发人员工具中切换hover 状态，以查看应用于hover 状态按钮的CSS。将此 CSS 添加到您的样式表将解决问题：

input[type=submit]:hover {
     background-position: 0px;
}

【讨论】：

所有答案的最简单解决方案。标记为已回答。谢谢！
感谢您提到开发者工具中悬停状态的切换，不知道。
同上切换，我真的想知道在哪里这样做

【解决方案2】：

你有这些规则：

input[type=submit]:hover {
  color: #fff;
  background-color: #222; // Here is the black background-color
  text-decoration: none;
  background-position: 0 -15px; // moves the background
  -webkit-transition: background-position .1s linear;
  -moz-transition: background-position .1s linear;
  -o-transition: background-position .1s linear;
  transition: background-position .1s linear;
}

.wpcf7-submit:hover {
  background-image: linear-gradient(to bottom,#fb8800,#975200) !important; // remove this?
}

只需将背景颜色更改为您选择的颜色。如果您只想更改颜色，我还建议您删除渐变悬停和背景定位。（当然，转换也没有多大意义。）

【讨论】：

【解决方案3】：

进入HTML，你会看到这一行是按钮：

<input class="wpcf7-form-control wpcf7-submit" type="submit" value="Skicka">

删除wpcf7-submit 以摆脱橙色。它改变了按钮的颜色，但它可能是一个解决方案。

或进入 CSS 文件并更改此属性：

.wpcf7-submit {
    background-image: linear-gradient(to bottom, #fb8800, #975200) !important;
}

橙色的代码是#fb8800

【讨论】：

【解决方案4】：

从页面中删除它

.wpcf7-submit:hover{
background-image: linear-gradient(to bottom,#fb8800,#975200) !important;
}

或者搜索它...找到它...然后杀死它！

【讨论】：

【解决方案5】：

在 BS4 中，您还需要覆盖 button:before 伪选择器以将不透明度设置为零，否则悬停仍然存在，因此您最终会得到类似的结果：

button.greyed-out-disabled,
button.greyed-out-disabled:focus,
button.greyed-out-disabled:hover {
  background-color: #E3E3E3 !important;
  color: #9E9E9E !important;
  outline: none;
}

button.greyed-out-disabled:before {
  background: rgba(255,255,255,0) !important;
}

【讨论】：