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 find out DOM and CSS address to an element for Selenium?

    How can I ensure that my absolutely positioned div is tall enough to meet my sticky footer?

    How to align 3 divs with CSS retaining relative position while scaling window

    How can I make my jquery mobile collapsible set larger using css

    How to create an infinite easing in and out CSS animation loop?

    How to add css class to style.css?

    How to disable css warning “Unknown property” in Eclipse Mars?

    How to link Body/Html Backgrounds with CSS in Ipad/Iphone (safari)

    How to embed a custom bitmap font into website using CSS

    How to give line-break from css, without using
    ?

    How to properly pad an HTML link?

    How to Flip Div's in Randomly

    How can I create scrollable columns in Bootstrap?

    How to make custom login button work

    How to install Firefox “Stylish” css file? [closed]

    How to get css hover values on click?

    How to animate CSS resize?

    Can't show Combobox in table

    jquery how to make an element comeback to initial position after animation

    How to create 10 CSS classes, each having 10% darker gray background with LESS?

    How to set border radius of some corner only with CSS

    How to apply CSS rotate transition around glyph's vertical middle or centerpoint

    How do I vertically align elements within a div in CSS?

    How to apply custom CSS to Angular Material md-contact-chips

    How to style a tag for current div with css?

    How to make section element in css to full width

    How do I keep my text on one line in Firefox?

    htmlAttributes: How do I add a CSS class rule for the below?

    How to build bootstrap version 4 so that the CSS only contains specific parts, such as grid?

    How to correctly align fixed header fully to top and left in CSS