Bootstrap折叠文字装饰

Question

对于Bootstrap Collapse Component，我有一个有关“手风琴示例”的问题。使用它们时，我希望从文本“ Collapsible Group Item” 1-3中删除下划线。默认情况下，它们不带下划线，然后当鼠标悬停在其上时，会带下划线。这可以通过以下操作进行修改：

btn-link:{
text-decoration: none;
}

但是，单击并移开鼠标后，下划线会一直持续到单击其他内容为止。我该如何删除下划线？检查链接以查看我正在谈论的行为。

Answer 1

只需为btn-link添加鼠标悬停

.btn-link:hover, .btn-link, .btn-link:focus{
   text-decoration:none;
}

check the demo here

Answer 2

该问题似乎是由于伪类:focus造成的，您可以像这样覆盖:focus的CSS。

.btn-link.focus, .btn-link:focus {
    text-decoration: none;
}

我希望这可以解决问题。

Answer 3

您需要添加两件事：

要删除悬停的下划线，请添加：

.btn-link:hover{
  text-decoration:none;
}

对于单击添加后的下划线：

.btn-link:focus{
  text-decoration:none;
}

查看此example。

Answer 4

您需要为此添加两种样式类型

.btn-link.focus, .btn-link:focus {
  text-decoration: none; //here is if you want to remove 
  box-shadow: none;
 }

还有这个

.btn-link:hover{
  text-decoration:none; //here is if you want to remove 
 }

Answer 5

简单方法：只需添加!important

.btn-link {
  text-decoration:none !important;
}

Fiddle

或者您可以使用:focus进行点击，并使用:hover进行悬停，

.btn-link:focus, .btn-link:hover {
    text-decoration: none;
}