Question

我希望在我的＆＃39; s＆＃39;在我的菜单中，我有，但后来我想让动画保持活动链接。

我的代码：

.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，因为我不想在活动的链接上制作动画 - ＆gt;当我将鼠标悬停在活动链接上时，我同时拥有两个活动加动画。

有效代码：

.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

实际上troubleshooting page只会在点击元素时影响该元素，然后消失，并且链接会在您发布时获得其初始样式。

<强>解决方案：

您需要使用自定义类，例如active并将其与您的活动元素一起使用，您将在CSS中将其设置为：

.menu ul li.active{
      //Your style goes here
}

但是，您需要JavaScript才能在点击的li元素中切换此类。

Answer 2

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

CSS psudo-class :active将无法满足您的目标。

编辑：将:not(.active)添加到css规则中，以便它不会应用于active链接。代码在我的编辑中发生了变化。

＆＃13;

$(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");
});

＆＃13;

.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%;
  }

＆＃13;

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

＆＃13;

如何让我的过渡保持活跃链接？

2 个答案: