html - 停止 :active state from propagating to parent

Question

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

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

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/

对不起语法。