css 伪 :active => 停止传播答案

【问题标题】：css pseudo :active => stop propagationcss 伪 :active => 停止传播
【发布时间】：2021-09-15 12:14:59
【问题描述】：

我有 2 个元素：.parentElement 和 .childElement。
两者都是实现:active，用于在按下时显示更暗。
.childElement 在 .parentElement 内。

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

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

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

【问题讨论】：

如果您可以将工作示例、HTML 和 CSS 作为 Stackoverflow sn-p 包含在内，人们会更容易提供帮助，在编辑时使用按钮添加代码。
看上面的截图，我已经更新了帖子
请包含您的代码 (HTML/CSS/JS)。
它是我整个 react 项目的一部分，css 是由几个 js 文件生成的。我不知道如何将它们合并到单个 css/js/html 并发布在这里

标签： html css pseudo-class

【解决方案1】：

我理解您的要求，但在 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>

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

【讨论】：