:target 伪元素中的动画仅在第一次点击时触发

Question

我想在单击另一个元素时突出显示某些 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。当我单击 "Fermions" 时，div "Fermions only goes out as a couple!" 突出显示。好的！当我再次单击 "Fermions" 时，它不再突出显示。但是，如果我单击 "Bosons"，从而突出显示另一个 div，然后再次单击费米子，然后再次突出显示带有费米子的 div。

有人能解释一下这是怎么回事吗？唯一的解决办法是一直点击高亮对应的div来使用Javascript吗？

Answer 1

对您所见内容的解释：

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

mysite.com/mypage/

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

mysite.com/mypage/#fermions

这将触发 :target 伪 class 动画。

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

所以动画不会被触发。

实现此效果（仅CSS）：

我很感激你可能想要一个 CSS-only 方法来产生这种效果，但是......你只能（某种程度上）响应用户 clicks 通过 CSS 使用 :focus 和 :target。在这两种情况下，您都会看到，一旦您进入给定状态（并且动画有一次运行），您将保持该状态（并且动画不会再次运行）直到您主动改变状态。

就是说，您可以通过 CSS 响应用户 鼠标悬停 来产生您想要的效果，使用:hover伪class.

工作示例：

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

:target 伪元素中的动画仅在第一次点击时触发

Animation within :target pseudo-element triggers only on the first click

css

pseudo-class

css-animations

对您所见内容的解释：

实现此效果（仅CSS）：