悬停时淡入淡出下划线？答案

【问题标题】：Fade in and out underline when hovering?悬停时淡入淡出下划线？
【发布时间】：2018-02-17 13:59:55
【问题描述】：

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

我不能使用border-bottom 属性，因为我的一些链接是制表符，所以如果我使用border-bottom，div 会得到下划线而不是文本。我只需要加下划线的文本。

有没有办法使用 CSS 或 JS.. 来做到这一点？

这是我要添加效果的 HTML：

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

【问题讨论】：

您是想让下划线淡化还是淡化所有文本？我问是因为我认为你不能像这样只画下划线。
@TylerChristian 我只需要下划线来淡入/淡出。但由于我的文字总是黑色的（下划线与否），也许没关系？
好吧，如果我理解你所说的正确，你需要开发一个不同的方案，可能使用<hr> 或其他一些元素来给文本加下划线。因为如果你淡化 <a> 它会完成所有事情。
有几种方法可以做到这一点，但这实际上取决于您页面的结构。如果您将文本包装在 span 或类似的东西中，您可以在其中添加一个边框底部，然后通过 CSS 添加animate。
我想我会使用@keyframes 来设置开始和结束的不透明度/颜色。 stackoverflow.com/questions/24363205/…

标签： html css hover underline

【解决方案1】：

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);
}

&lt;a href="#"&gt;qwerty lorem&lt;/a&gt;

您应该使用border-bottom 并通过使用rgba 并更改不透明度值来为其设置动画。

【讨论】：

是的。但我最好要求不是border-bottom 的解决方案。因为我的一些链接在标签 (div) 中，然后它在 div 下划线，而不是文本。
您能否为此显示一些 html，因为很难解决无法看到的问题。 border-bottom 将有一种方法可以做到这一点，只需创建一个适用于您的 dom 结构的选择器。

【解决方案2】：

不知道有没有办法用css text-decoration来做，不过你可以用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>

【讨论】：

【解决方案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>

【讨论】：

这实际上是一种非常聪明的方法，因为它适用于 div 以及 a 标签。但是，对于 div，您可能需要将伪元素 position 向上一点以避免它太低（在 div/tab 之外）

【解决方案4】：

您可以使用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;
}

&lt;a href="#"&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit.&lt;/a&gt;

【讨论】：

它有效，但仅适用于 Firefox 和 Chrome。不能在 Safari 上运行……有没有办法让这个解决方案在所有浏览器上都运行？
MDN 表明 Safari 需要一个 -webkitprefix（虽然 IE 没有运气）。
好的！如何编写带有-webkit 前缀的代码？
使用单独的属性，例如 text-decoration-color MDN 上还有更多内容 - developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
我看了一下 MDN。但是当我使用前缀 -webkit- 时，它会删除我所有带下划线的文本并悬停......