停止 :active 状态传播到 parent

Question

我有一个 parent 容器，容器内有一个按钮。当您单击 parent 时，我希望整个事情都处于活动状态并应用背景颜色以指示单击已被注册。但是，当我单击 child 时，我只希望 child 处于活动状态，以便背景颜色仅应用于 child，并且可以清楚地知道单击的位置。如何阻止 :active 状态传播到 parent？

这是我正在尝试做的一个例子：

HTML

<div class="container">
    <div class="inner-button"> hello </div>
</div>

CSS

.container {
    width: 100%;
    height: 45px;
    border: solid 1px;
}

.inner-button {
    width: 45px;
    height: 30px;
    border: solid 1px;
}

.container:active {
    background-color: #00FF00;
}

.inner-button:active {
    background-color: #FF3300;
}

在这个例子中，我希望当您单击外部 div 时整个东西闪烁绿色，并且只有内部 div 在单击时闪烁红色。目前无论你点击哪里，最外面的 div 都会闪烁。

Here is the jsfiddle

编辑：我确实尝试在活动中调用 stopPropagation()，但它对状态没有帮助。

Answer 1

你无法通过 css 使用该代码实现你的目标，但你可以按照他的方式实现：

<div class="container">
<div class="ut"></div>
<div class="inner"> hello </div>

Css

.container
{
position:relative;
width:100px;
height:100px;
border:solid thin;
}

.inner
{
position:absolute;
width:35px;
height:35px;
border:solid thin;
z-index:100;
}

.inner:active
{
background:red;
}

.ut
{
position:absolute;
width:100px;
height:100px;
border:solid thin;
}

.ut:active
{
background:green;
}

你不能用容器来做。您应该添加一个职位相同或更低的部门。

http://jsfiddle.net/fbofpjec/1/

语法错误。

停止 :active 状态传播到 parent

Stop :active state from propagating to parent

html

css

propagation