Question

我将border-bottom颜色设置为灰色并将过渡到.3s，并且＆＃39;：hover＆＃39;效果，所以在悬停时它会将颜色变为蓝色。问题与此有关：当我将鼠标放在具有悬停效果的元素上时，我设置的边框（蓝色）从上到下出现（下降效果）。

现在我的客户希望边框在悬停时从左到右出现，并且边框在悬停在另一个列表项上时不应该消失，它（边框）必须落后于＆＃39;光标试图赶上＆＃39;光标并填充下一个列表项的边框位置。我希望你得到我想要的东西。我知道在css中不可能这样做，但是我不知道如何在js中做到这一点，有人可以帮我解决这个问题，而不是使用像jQuery这样的任何框架。

Answer 1

您可以使用HTTP/1.1 200 OK Server: nginx/1.4.6 (Ubuntu) Date: Thu, 12 Oct 2017 07:10:39 GMT Content-Type: text/html; charset=utf-8 Content-Length: 3792 Connection: keep-alive X-Powered-By: Express Access-Control-Allow-Origin: http://localhost:3000 Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization, Token Access-Control-Allow-Credentials: true ....属性进行动画制作，因为Thusitha说。

我在这里附上了codepen链接。

＆＃13;

width

＆＃13;

ul {
  list-style-type: none;
  border-bottom: 5px solid #eee;
}
ul li {
  display: inline-block;
  position: relative;
  padding: 20px;
}
ul li:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 0px;
  bottom: -5px;
  left: 0;
  background: blue;
  transition: all linear 0.25s;
}

/* Expanding Animation Element */
ul li:hover:before {
  width: 100%
}

＆＃13;

如何使用vanilla javascript或css

1 个答案: