如何禁用引导自定义按钮的悬停效果？答案

【问题标题】：How to disable hover effect on bootstrap custom button?如何禁用引导自定义按钮的悬停效果？
【发布时间】：2021-01-29 19:01:22
【问题描述】：

我正在使用 bootstrap 3，这可能是一个愚蠢的问题，但我无法在此处禁用 fa-chart-line 图标上的悬停效果：

<h5>
  <span class="btn btn-circle blue1-icon"> 
    <i class="fas fa-chart-line"></i>
  </span> My Title
</h5>

CSS：

.blue1-icon {
  background-color: #019993;
  color: #fff;
}

.blue1-icon:hover {
  text-decoration: none;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}


.btn-circle:hover {
  cursor: default;
  text-decoration: none !important;  
 }


.fa-chart-line:hover  {
  text-decoration: none !important;
}

我该如何解决这个问题？

【问题讨论】：

可以放你的html吗？
抱歉刚刚修复了html。
你能演示一下你的问题吗？我似乎无法复制。

标签： html css twitter-bootstrap-3

【解决方案1】：

我很难准确确定效果，但您始终可以使用pointer-events。

.btn-circle {
    pointer-events: none;
    display: inline-block; /* For added support */
}

链接：

【讨论】：

问题是如何禁用悬停事件！不是所有的事件
@Ricardinho 嗯，您预见到使用 pointer-events: none 会发生什么意外行为？

【解决方案2】：

检查一下。

您需要在悬停时将 .btn 的颜色设置为白色。我添加了 !important 仅用于演示目的。理想情况下，如果您在引导 css 之后加载 css，则无需提供 !important。

另外，不需要您在代码中使用的文本装饰。

.blue1-icon {
  background-color: #019993;
  color: #fff;
}

.blue1-icon:hover {
  text-decoration: none;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}


.btn:hover {
  cursor: default;
  color: white !important;
 }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h5>
       <span class="btn btn-circle blue1-icon"> 
            <i class="fa fa-line-chart" aria-hidden="true"></i>
      </span> My Title
   </h5>

【讨论】：

【解决方案3】：

根据documentation 在bootstrap4 中，您只需将disabled 添加到按钮标签（不是css 类），如下所示：

<h5>
  <button class="btn btn-circle blue1-icon" disabled> 
    <i class="fas fa-chart-line"></i>
  </button> My Title
</h5>

至少，按钮是这样工作的。

希望这会有所帮助，并且不会离题太远（使用按钮而不是 span 和 bootstrap4 而不是 3）。

【讨论】：