web-dev-qa-db-fra.com

twitter-bootstrap: comment se débarrasser du texte d'un bouton souligné lorsque vous survolez un groupe-btn dans une balise <a>?

En utilisant le balisage ci-dessous, le texte du bouton est souligné lorsqu'il est survolé. Comment puis-je me débarrasser de ce comportement?

Existe-t-il un meilleur moyen d’ajouter des liens à un groupe btn dans bootstrap qui évite ce comportement?

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

Lignes CSS testées:

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 }

Tout complément important! Ne fonctionne pas non plus (suggéré par baptme).

csstwitter-bootstrap
31
BerndBrot

{ text-decoration: none !important}

EDIT 1:

Par exemple, seul a{text-decoration: none} fonctionnera

Vous pouvez utiliser une classe pour ne pas interférer avec le comportement par défaut des balises <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
}
61
baptme
a.btn {
  text-decoration: none;
}
7
Jossef Harush

Le problème est que vous ciblez le bouton, mais que c'est la balise A qui provoque la décoration du texte: soulignement. Donc, si vous ciblez la balise A, cela devrait fonctionner.

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

Pourquoi ne pas simplement appliquer la classe nav-link?

<a href="#" class="nav-link">
4
Bhojendra Rauniyar

Si vous utilisez Less ou Sass avec votre projet, vous pouvez définir la variable link-hover-decoration (qui est underline par défaut) et vous êtes prêt.

2
Alex
a:hover, /* OPTIONAL*/
a:visited,
a:focus
{text-decoration: none !important;}
1
ARTniyet
a:hover{text-decoration: underline !important}
a{text-decoration: none !important}
0
TheLogicGuy

.btn est la meilleure façon, sur un site Web moderne, il n’est pas bon d’utiliser anchor element sans href alors faites passer le anchor tag à button soit meilleur.

0
namnh