Question

我正在创建我的工作网站，在我的导航栏中我有3个链接。关于 2.projects 3.contact。

这些文本都在（a）标签中。并且a标签被包装在div容器中。在悬停（链接）时，我想要一条动画白线来传递文本的投掷（中间）。只有HOVER。

仅限css / javascript / jquery解决方案。

Answer 1

您可以使用:before伪元素创建元素，并在悬停时简单地设置其宽度动画。

E.G：这或类似的东西。

＆＃13;

div {
  display:inline-block; padding:10px; margin:0 10px 10px 0;
  background:#333333;
}
div > a {
  position: relative;
  color: #000;
  text-decoration: none;
}
div > a:hover {
  color: #fff;
}
div > a:before {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 50%;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
} 
div > a:hover:before {
  visibility: visible;
  width:100%;
}

＆＃13;

<div>
<a href="#">About</a>
</div><div>
<a href="#">Projects</a>
</div><div>
<a href="#">Contact</a>
</div>

＆＃13;

Answer 2

将此添加到您的CSS 不幸的是，text-decoration属性不可动画。

a:hover{
      text-decoration:line-through;
    }

编辑：我看到上面有一个更好的解决方案，我建议你使用它而不是内置的删除线值。

Answer 3

这是一个pen

<ul>
  <li>
    <a href="">link1</a>
    <span class="line-pass-through">
  </li>
  <li>
    <a href="">link2</a>
    <span class="line-pass-through">      
  </li>
  <li>
    <a href="">link3</a>
    <span class="line-pass-through">      
  </li>
</ul>

CSS

li {
  display: inline-block;
  margin-right: 25px;
  position: relative;
  overflow: hidden;
}

a {
  text-decoration: none;
  color: cornflowerblue;
  font-size: 24px;
}

.line-pass-through {
  position: absolute;
  width:100%;
  height:1px;
  background: #444;
  transform: translate(-100%, 50%);
  top: 50%;
  transition: all .3s ease-out;
}

li:hover .line-pass-through {
  transform: translate(0%, 50%);
}

什么创建动画线投掷链接中的文本？

3 个答案: