twitter-bootstrap:当鼠标悬停在<a> -tag中的btn-group时,如何摆脱带下划线的按​​钮文字？

Question

使用下面的标记,当悬停在上面时,按钮文本加下划线.我该如何摆脱这种行为？

有没有更好的方法在bootstrap中添加链接到btn-group以避免这种行为？

<a href="#">
    <div class="btn-group">
        <button class="btn">Text</button>
        <button class="btn">Text</button>
    </div>
</a>

经测试的CSS行:

a:hover .btn-group { text-decoration: none }
a .btn-group:hover { text-decoration: none }
a:hover .btn-group .btn { text-decoration: none }
a .btn-group .btn:hover { text-decoration: none }

任何额外的!重要的也不起作用(由baptme建议).

Answer 1

{ text-decoration: none !important}

编辑1:

对于你的例子,只会a{text-decoration: none}起作用

您可以使用类来不干扰<a>标记的默认行为.

<a href="#" class="nounderline">
  <div class="btn-group">
    <button class="btn">Text</button>
    <button class="btn">Text</button>
  </div>
</a>

CSS:

.nounderline {
  text-decoration: none !important
}

Answer 2

btn除非你做错了什么,否则该类的按钮没有下划线:在这种情况下,嵌套<button>在<a>^†内部.

我认为您可能尝试做的事情是创建一个没有任何装饰的引导按钮(下划线,轮廓,按钮边框等).换句话说,如果你的锚不是超链接,那么它在语义上就是一个按钮.

Bootstrap的现有btn类似乎是从锚点按钮中删除下划线装饰的正确方法:

使用按钮类上<a>,<button>或<input>元素

编辑: Hitesh指出,这btn将给你一个阴影:active.谢谢!我已经修改了我的第一个例子来使用btn-link并合并了接受的答案text-decoration: none以避免这个问题.请注意,在锚点内嵌套按钮仍然是格式错误的html ^†,这是其他任何答案都无法解决的问题.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div>
    <!-- use anchors for borderless buttons -->
    <a href="#" class="btn btn-link" style="text-decoration: none">Text</a> 
    <a href="#" class="btn btn-link" style="text-decoration: none">Text</a>
</div>

或者,对于使用锚点的常规按钮组:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group">
    <!-- use anchors for borderless buttons -->
    <a href="#" class="btn btn-default">Text</a> 
    <a href="#" class="btn btn-default">Text</a>
</div>

换句话说,没有必要nounderline像其他答案所暗示的那样引入您自己的类和/或自定义样式.但是,要注意某些细微之处.

^†根据HTML5规范,<a><button>..</button></a>是非法的:

内容模型: 透明,但必须没有交互式内容后代.

...

交互式内容是专门用于用户交互的内容. a,audio(如果该控件属性存在), ,button,embed,iframe(img如果USEMAP属性存在), input(如果该类型属性不是处于隐藏状态), ,keygen,label(object如果USEMAP属性存在), ,select,textarea(video如果controls属性存在)

PS相反,如果你想要一个带有下划线装饰的按钮,你可能已经习惯了btn-link.然而,这应该是罕见的 - 这几乎总是只是一个锚而不是一个按钮!

Answer 3

为什么不只是nav-link上课呢？

<a href="#" class="nav-link">

Answer 4

引导程序4+

现在，在Bootstrap 4+中可以轻松做到这一点

<a href="#" class="text-decoration-none">
    <!-- That is all -->
</a>

Answer 5

a.btn {
  text-decoration: none;
}

Answer 6

问题是你的目标是按钮,但它是导致文本修饰的A标记:下划线.因此,如果你定位A标签,那么它应该工作.

a:hover, a:focus { text-decoration: none;}