html - 我怎样才能使我的转换保持在事件链接上？

Question

我想在我的菜单中的“li”上添加线条动画，我已经做到了，但是我想让动画保持在事件链接上。

我的代码:

.menu ul li:before {
  content: "";
  display: block;
  width: 0%;
  color: #f7f7f7;
  border-top: 1px solid transparent;
  border-image-slice: 1;
  transition: width .5s ease-in-out 0s;
  margin-bottom: 5px;
}
.menu ul li:focus:before,
.menu ul li:hover:before {
  color: #f7f7f7;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, #529ecc , #9CF5A6);
  border-image-slice: 1;
  width: 100%;

编辑:我添加了 .active，但我认为我必须在其中使用 javascript，因为我不想在事件的链接上制作动画 --> 然后我有两个，在事件时加上动画我将鼠标悬停在事件链接上。

有效代码:

.menu ul li.active {
  color: #f7f7f7;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, #529ecc , #9CF5A6);
  border-image-slice: 1;
  margin-bottom: 5px;

Answer 1

这是一个答案...这可能会帮助您完成您真正想做的事情。这会将一个类应用于您单击的任何链接，让您可以根据自己的喜好设置样式。它使用 jQuery，但如果需要，它可以用纯 javascript 编写。也可以使用 PHP 或其他一些服务器端脚本语言来完成。

CSS psudo-class :active 将无法与您尝试执行的操作一起使用。

编辑:将 :not(.active) 添加到 css 规则，这样它就不会应用于 active 链接。在我的编辑中更改了代码。

$(document).on("click", ".menu li a", function(e) {
  //This removes the `active` class from all `a`
  $(".menu li a").removeClass("active");

  //This adds the `active` class to the `a` that was clicked on
  $(this).addClass("active");
});

.active {
  background: #ffbf00;
}

.menu ul li a:not(.active):before {
  content: "";
  display: block;
  width: 0%;
  color: #f7f7f7;
  border-top: 1px solid transparent;
  border-image-slice: 1;
  transition: width .5s ease-in-out 0s;
  margin-bottom: 5px;
}
.menu ul li a:not(.active):focus:before,
.menu ul li a:not(.active):hover:before {
  color: #f7f7f7;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, #529ecc , #9CF5A6);
  border-image-slice: 1;
  width: 100%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='menu'>
  <ul>
    <li><a href='#'>Page 1</a></li>
    <li><a href='#'>Page 2</a></li>
    <li><a href='#'>Page 3</a></li>
    <li><a href='#'>Page 4</a></li>
  </ul>
</div>