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;
}

我该如何解决这个问题？

Answer 1

我很难确切地确定效果，但您可以随时使用switch (result) { case SignInStatus.Success: ApplicationUser CurrentUser = UserManager.FindByEmail(model.Email); //Use this "CurrentUser" Id for your function. case SignInStatus.LockedOut: return View("Lockout"); case SignInStatus.RequiresVerification: return RedirectToAction("SendCode", new { ReturnUrl = returnUrl, RememberMe = model.RememberMe }); case SignInStatus.Failure: default: ModelState.AddModelError("", "Invalid login attempt.If you do not have an account please register one"); return View(model); }。

pointer-events

链接：

Answer 2

检查一下。

您需要在悬停时将.btn的颜色设置为白色。我添加了！仅用于演示目的。理想情况下，如果你在bootstrap 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>

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

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

希望这会有所帮助，并且不会离题太远（使用 button 代替 span 和 bootstrap4 代替 3）。

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

3 个答案: