css 伪 :active => 停止传播

问题描述

我有 2 个元素：.parentElement 和 .childElement。
两者都实现了 :active 以使按下时显得更暗。
.childElement 位于 .parentElement 内。

我想让 .parentElement:active 在 .childElement:active 触发时不被触发。

在 javascript 中，它可以通过使用 .stopPropagation() 来完成。 css方式怎么样？

这是我正在做的项目：
每个标题都是可点击的，包括子标题。 基本上它是一个按钮内的按钮。 当用户点击它时，页面将滚动到相应的部分。

解决方法

我明白你在问什么，但是在 CSS 中，当孩子处于活动状态时，父母处于活动状态 - 我不相信有任何方法可以防止点击“冒泡”。 相反，您可以通过使用已设置为嵌套样式的兄弟元素来伪造它，如下所示：

<style>
    .parentElement {background-color:#ff9999;padding:8px;}
    .childElement {background-color:#9999ff;border:solid 8px #ff9999;border-top-width:0;padding:8px;}

    .parentElement:active {background-color:#ff3333;}
    .parentElement:active ~ .childElement {border-color:#ff3333;}
    .childElement:active {background-color:#3333ff;}
</style>

<div class="parentElement">Parent</div>
<div class="childElement">First child</div>
<div class="childElement">Second child</div>
<div class="childElement">Third child</div>

如果这有帮助，请告诉我:-)