您所看到的内容的说明：

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。当我点击“费米子”时，div“费米子只会像一对夫妇一样出现！”强调。好！当我再次点击“费米子”时，它不再突出显示。但是如果我点击“Bosons”，然后点击另一个div，然后再点击Fermions，那么带有Fermions的div会再次亮起。

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

Answer 1

您所看到的内容的说明：

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

mysite.com/mypage/

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

mysite.com/mypage/#fermions

这将触发:target伪类动画。

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

因此不会触发动画。

实现此效果（仅限CSS）：

我感谢您可能想要一种仅使用CSS的方式来产生这种效果，但是......您只能使用:focus通过CSS回复用户点击和:target。在这两种情况下，您都会看到一旦进入给定状态（动画运行一次），您将保持该状态（并且动画不会再次运行），直到您主动更改状态。 / p>

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

工作示例：

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

动画内：目标伪元素仅在第一次单击时触发

1 个答案:

您所看到的内容的说明：

实现此效果（仅限CSS）：