如何仅在<a> element in CSS?

Question

I'm using Bootstrap and I have the following code:

<a class="b_author" href="#">
  <img class="b_author-avatar img-circle" src="/images/profile_photo.jpg" width="20" height="20">
  <span class="b_author-username">johndoe</span>
</a>

How can I get rid of the underline on hover?

中为文本元素加下划线

Answer 1

a:hover { text-decoration: none; }
a:hover span { text-decoration: underline; }

Answer 2

在text-decoration上使用a:hover的{​​{1}}属性。

请看下面的代码段：

<span>

a {
  text-decoration: none;
}

a span {
  text-decoration: underline;
}

希望这有帮助！

Answer 3

仅限制类

的样式

a.b_author{
  text-decoration: none;
}
a.b_author:hover span.b_author-username{
  text-decoration: underline;
}

这对许多其他元素来说，通用

a{
  text-decoration: none;
}
a:hover span{
  text-decoration: underline;
}