twitter-bootstrap：当悬停在< a> -tag中的btn组上时，如何摆脱带下划线的按​​钮文字？ [英] twitter-bootstrap: how to get rid of underlined button text when hovering over a btn-group within an <a>-tag?

问题描述

使用下面的标记，当悬停在按钮文本时，下划线。如何摆脱这种行为？

Using the markup below, the button text is underlined when hovered over. How can I get rid of that behavior?

有没有更好的方法来添加一个btn-group在bootstrap的链接，避免这种行为？

Is there a better way to add links to a btn-group in bootstrap that avoids this behavior?

<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建议）。

Any additional !important does not work, either (suggested by baptme).

推荐答案

{text-decoration：none！important}

/ strong>

EDIT 1:

对于您的示例 a {text-decoration：none} 将起作用

您可以使用类来不影响< a> 标签的默认行为。

You can use a class not to interfere with the default behaviour of <a> tags.

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

这篇关于twitter-bootstrap：当悬停在< a> -tag中的btn组上时，如何摆脱带下划线的按​​钮文字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！