BerndBrot BerndBrot - 6 months ago 14
CSS Question

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?

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>


Tested CSS lines:

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 }


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

Answer

{ text-decoration: none !important}


EDIT 1:

For you example only a{text-decoration: none} will works

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