Twitter-bootstrap: как избавиться от подчеркнутого текста кнопки при наведении на btn-группу в <a>-tag?

Используя разметку ниже, текст кнопки подчеркивается при зависании. Как я могу избавиться от этого поведения?

Есть ли лучший способ добавить ссылки на btn-группу в bootstrap, что позволяет избежать этого поведения?

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

Ответы

Ответ 1

{ text-decoration: none !important}

РЕДАКТИРОВАТЬ 1:

Для вашего примера будет работать только a{text-decoration: none}

Вы можете использовать класс, чтобы не мешать поведению по умолчанию тегов <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
}

Ответ 2

Кнопки с классом btn не имеют подчеркивания, если вы не делаете что-то неправильно: в этом случае вложите <button> внутри <a> †.

Я думаю, что вы, возможно, пытаетесь сделать это, создать кнопку начальной загрузки без каких-либо украшений (подчеркивание, контур, границы кнопок и т.д.). Другими словами, если ваш якорь не является гиперссылкой, это семантически кнопка.

Bootstrap существующий класс btn кажется, является правильным способом удаления подчеркивания подчеркивания из кнопок привязки:

Используйте классы <button> элемента <a>, <button> или <input>

РЕДАКТИРОВАТЬ: Хитеш указывает, что btn даст вам тень на :active. Спасибо! Я изменил свой первый пример, чтобы использовать btn-link и btn-link text-decoration: none принятого ответа text-decoration: none чтобы избежать этой проблемы. Обратите внимание, что вложение кнопки внутри якоря остается искаженным html † - точкой, которая не рассматривается ни в одном из других ответов.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div>
    <!-- use anchors for borderless buttons -->
    <a href="#" class="btn btn-link" style="text-decoration: none">Text</a> 
    <a href="#" class="btn btn-link" style="text-decoration: none">Text</a>
</div>

Ответ 3

a.btn {
  text-decoration: none;
}

Ответ 4

Проблема в том, что вы нацеливаете кнопку, но это тег A, который вызывает текстовое оформление: подчеркивание. Поэтому, если вы нацеливаете тег A, тогда он должен работать.

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

Ответ 5

Почему бы просто не применить класс nav-link?

<a href="#" class="nav-link">

Ответ 6

Если вы используете Less или Sass с вашим проектом, вы можете определить переменную link-hover-decoration (которая по умолчанию underline), и вы все настроены.

Ответ 7

a:hover, /* OPTIONAL*/
a:visited,
a:focus
{text-decoration: none !important;}

Ответ 9

a:hover{text-decoration: underline !important}
a{text-decoration: none !important}

Ответ 10

.btn - лучший способ, на современном веб-сайте он не очень хорош при использовании anchor element без href поэтому лучше сделать anchor tag к button.

Ответ 11

Вы можете использовать bootstrap 4 class="text-decoration-none"

Ответ 12

Попробуйте добавить тег привязки внутри и добавить {display: block;}.... он будет работать нормально