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/

抱歉语法。

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

1 个答案: