Question

当我将鼠标悬停在链接上时，如何使淡入淡出显示下划线？

我无法使用border-bottom属性，因为我的某些链接是标签，因此如果我使用border-bottom，则div会显示下划线而不是文本。我只需要加下划线的文字。

有没有办法使用CSS或JS ..？

以下是我想要添加效果的HTML：

＆＃13;

<div class="tabcordion">
  <ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <li class="option1 active underline"><a data-target=".KONTAKT">KONTAKT</a></li>
    <li class="option2"><a data-target=".ÜBER_UNS">ÜBER UNS</a></li>
    <li class="option3"><a data-target=".BESUCH">BESUCH</a></li>
    <li class="option4"><a data-target=".MITGLIED">MITGLIED</a></li>
    <li class="option5"><a data-target=".PROJEKTBERATUNG">PROJEKTBERATUNG</a></li>
  </ul>
</div>

＆＃13;

Answer 1

您可以使用text-decoration属性并转换颜色'

text-decoration-color @ MDN

a {
  text-decoration: underline solid transparent;
  transition: text-decoration 1s ease;
  display: block;
  width: 100px;
  border: 1px solid green;
  margin: 1em auto;
  border-radius: 1em;
  padding: 1em;
}

a:hover {
  text-decoration: underline solid Currentcolor;
}

<a href="#">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a>

Answer 2

＆＃13;

a {
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0 ,0);
  transition: border-bottom 300ms;
}
a:hover {
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}

＆＃13;

<a href="#">qwerty lorem</a>

＆＃13;

您应该使用border-bottom并使用rgba设置动画并更改不透明度的值。

Answer 3

您可以使用pseudoelement

.tab {
  background: whitesmoke;
  padding: 1em;
  display: inline-block;
}

a {
  text-decoration: none;
  position: relative;
  font-size: 2em;
}

a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: black;
  opacity: 0;
  transition: 1s all ease-in-out;
}

a:hover:after {
  opacity: 1;
}

<div class="tab">
  <a href="#" class="underline">link</a>
</div>

Answer 4

我不知道是否有办法用css文本修饰来做，但你可以用border-bottom模仿它：

.posts a {
  color: black;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  -webkit-transition: border 400ms ease;
  -moz-transition: border 400ms ease;
  -ms-transition: border 400ms ease;
  -o-transition: border 400ms ease;
  transition: border 400ms ease;
}

.posts a:hover,
.posts a:active {
  border-bottom: 1px solid black;
}

<div class="posts">
  <a href="#">something</a>
</div>

在悬停时淡入和淡出下划线？

4 个答案: