当鼠标悬停在按钮上时禁用按钮颜色更改

Question

如何禁用按钮颜色在鼠标悬停或用户按下按钮时的变化？

我正在使用Bootstrap：

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css'>

这里是使用按钮的一部分代码：

<form id="idForm1" method="post" action="/web_crawler">
    <h4> Web crawler requests: </h4><br>
    <textarea id="id_text_requests" name="text" rows="5" cols="20" style="resize:none">{{text_requests}}</textarea><br>
    <input id="form1_send_button" type="button" class="btn" value="Run web crawler">
    <br>
</form>

更新:

根据答案和建议，这里是一个使用CSS的（不完美）解决方案，但我硬编码了颜色（可能可以以某种自动化的方式完成？），并且在按钮处于点击状态时出现了一些虚线框，如何删除它们？

以下是示例:

.btn:hover {
    background:#325d88;
    }
.btn:active:focus { 
    color: #FFFFFF;
    }
.btn:focus { 
    background: #325d88;
    color: #FFFFFF;
    }

更新2：

看起来这是一个Firefox相关的问题：

这个方法可以解决它：

.btn:focus { 
    background: #325d88;
    color: #FFFFFF;
    outline:none;
    }

- mrgloom

---

你目前尝试了什么？ - Phiter

我认为最好使用自定义按钮，因为Bootstrap每次都会进行所有样式设置。 - Phiter

可能是什么是Bootstrap禁用按钮悬停类名？的重复。 - Ele

你可以使用 CSS 完成它。点击这里查看解决方法 - Rizwan

Answer 1

在每个状态下创建一个禁用按钮的样式：:disabled，:hover，:active。

.btn:disabled,
.btn:disabled:hover,
.btn:disabled:active,
.btn:disabled:hover:active {
    // Your disabled styles
}

Live Demo: https://jsfiddle.net/565ang1z/（现场演示）

- Bigdragon

Answer 2

你可以使用这个CSS。

#idForm1    .btn:focus,
#idForm1    .btn:active:focus,
#idForm1    .btn.active:focus,
#idForm1    .btn.focus,
#idForm1    .btn:active.focus,
#idForm1    .btn.active.focus {
  outline: none;
  outline-offset: 0;
}
#idForm1    .btn:hover,
#idForm1    .btn:focus,
#idForm1    .btn.focus {
  color: #333;
  text-decoration: none;
}
#idForm1    .btn:active,
#idForm1    .btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

- Athul Nath