html - css 伪 :active => 停止传播

问题描述

我有 2 个元素：.parentElement& .childElement。
两者都是:active使按下时显得更暗的工具。
是在.childElement里面.parentElement。

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

在 javascript 中，可以使用.stopPropagation(). 用css方式怎么样？

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

标签： htmlcsspseudo-class

我明白你在问什么，但是在 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>

请让我知道这可不可以帮你：-）

html - css 伪 :active => 停止传播

问题描述

解决方案

推荐阅读