【问题标题】：Animation within :target pseudo-element triggers only on the first click:target 伪元素内的动画仅在第一次单击时触发
【发布时间】：2018-05-20 17:44:43
【问题描述】：

我想在单击另一个元素时突出显示某个 HTML 元素。仅使用 CSS 的经典解决方案似乎如下，使用以下 HTML，

<!DOCTYPE html>
<html>
  <body>
    <div>
      There are <a href="#fermions">Fermions</a> 
      and <a href="#bosons">Bosons</a>.
      <div class="highlightable" id="fermions">
        Bosons are very social particles!
      </div>
      <div class="highlightable" id="bosons">
        Fermions only goes out as a couple!
      </div>
    </div>
  </body>
</html>

以及下面的 CSS

@keyframes highlight {
  0% {
    background: LightSkyBlue;
  }
  100% {
    background: none;
  }
}

.highlightable:target {
  animation: highlight 1s;
}

这是fiddle implementing this。当我点击“费米子”时，div“费米子只作为一对出去！”强调。好的！当我再次单击“费米子”时，它不再突出显示。但是，如果我点击“Bosons”，从而突出显示另一个 div，然后再次点击 Fermions，则带有 Fermions 的 div 再次突出显示。

有人可以解释发生了什么吗？始终单击突出显示相应的div 以使用Javascript 的唯一解决方案是？

【问题讨论】：

因为它已经是目标，所以动画还在……就像你添加了一个类然后你想再次添加它，但它已经在那里了

标签： css css-animations pseudo-class

【解决方案1】：

您所看到的解释：

如果您的浏览器当前指向该地址：

mysite.com/mypage/

然后您点击<a href="#fermions">，您的浏览器现在将指向：

mysite.com/mypage/#fermions

这将触发:target 伪类动画。

如果你现在再次点击<a href="#fermions">...你不会去任何地方——因为你已经在那里了。

所以动画不会被触发。

实现此效果（仅限 CSS）：

感谢您可能想要一种纯 CSS 的方式来产生这种效果，但是...您只能（某种程度）使用 :focus 和 @ 通过 CSS 响应用户点击 987654327@。在这两种情况下，您都会看到，一旦您进入给定状态（并且动画已经运行一次），您将保持在该状态（并且动画不会再次运行），直到您主动更改状态。

也就是说，您可以通过 CSS 使用 :hover 伪类响应用户 mouse-overs 来产生您想要的效果。

工作示例：

[href="#fermions"]:hover ~ #fermions,
[href="#bosons"]:hover ~ #bosons {
animation: highlight 1.2s ease-out 0.15s;
}

@keyframes highlight {
  0% {background: LightSkyBlue;}
100% {background: none;}
}

<div>
There are <a href="#fermions">Fermions</a> and <a href="#bosons">Bosons</a>.

<p class="highlightable" id="bosons">
Bosons are very social particles!</p>

<p class="highlightable" id="fermions">Fermions only goes out as a couple!</p>
</div>

【讨论】：

我不太同意悬停状态，因为它需要特定的 HTML 结构：您的元素需要是兄弟元素，这在大多数情况下都不容易实现
是的，我承认这一点。我认为唯一的选择是使用javascript。我会监听onclick 事件，添加一个类来触发动画并设置超时（比动画的持续时间长一点），然后在动画完成后再次删除该类。
确实很难重新组织 HTML。不仅如此，突出显示的 div 可能距离可点击链接足够远，因此需要滚动，这不适用于悬停。但感谢教我一个好把戏！