twitter-bootstrap: how to get rid of underlined button text when hovering over a btn-group within an -tag?


Tags:
css,twitter-bootstrap

Problem :

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).



Solution :

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

    CSS Howto..

    How to place a color cover on top of an image in CSS

    how to set !important on a multi value css transform?

    how to fit the background image to the containing anchor element?

    How to center list

    How do I position images left and right in wordpress post

    How to avoid css and scripting effect when input on textbox

    CSS Button Animation - How to Accomplish?

    Test if is visible with ng-show attribute

    How to make css opacity property not to be inherited from parent div´s?

    How to target all elements, except last one with css?

    how to make dropdown menu using html & css

    How to center dropdown menu under parent tab?

    Fancyselect: How to force to open the selector at the bottom?

    How to get css values in IE7 when “auto” is returned

    CSS - HTML - How to align images properly across the page

    CSS: How to prevent focus from breaking absolute position in overflow:hidden wrapper

    How to make footer responsive through CSS?

    How to preserve css class name through GWT compilation?

    How to set div to display in only one line?

    Slideshow flickering image on :hover

    How can I add my custom style for my bootstrap navbar?

    CSS: How to position an to the middle of the parent element [closed]

    How to embed a font in website

    How to proper align after CSS column-count

    How to show a message box on center of screen?

    How to make CSS menu bar activated only after my mouse cursor is at the menu.

    CSS, how to add picture in the corner of every columns

    How to add Indian rupee symbol to the RadioButtonList control in asp.net using CSS design

    How can I force a table made using the CSS display: table to fit within a minimum height?

    How to get the profile pic aligned center?