停止：从传播到父级的活动状态

Question

我有一个父容器，以及该容器内的一个按钮。当您单击父级时，我希望整个事件处于活动状态并应用背景颜色以指示单击已被注册。但是，当我单击孩子时，我只希望孩子处于活动状态，以便背景颜色仅应用于孩子，并且很清楚单击已注册的位置。如何阻止 :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/

语法错误。