如何在Bootstrap自定义按钮上禁用悬停效果？

Question

我正在使用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;
}

我该如何解决这个问题？

- Karlom

---

你能放置你的HTML吗？ - Ishwar Patil

抱歉，我刚刚修复了HTML。 - Karlom

你能展示一下你的问题吗？我似乎无法复制。 - Chris Happy

Answer 1

我很难确定它的确切影响，但你可以使用pointer-events。

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

Links:

• CanIUse.com
• W3Schools

- Chris Happy

---

问题是如何禁用悬停事件！不是所有的事件。 - Ricardinho

@Ricardinho 嗯，你认为使用 pointer-events: none 会出现什么意外行为？ - Chris Happy

Answer 2

根据文档，在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）。

- squarespiral

Answer 3

请看这里。

当鼠标悬停在按钮上时，您需要将 .btn 的颜色设置为白色。我仅出于演示目的添加了 !important。理想情况下，如果您在 bootstrap css 之后加载您的 css，则不需要提供 !important。

此外，您在代码中使用的 text-decoration 是不必要的。

.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>

- Ishwar Patil