html - CSS, HTML On Active Parent/Children

Question

我试图在点击时将我的面板/ block 设置为不同的颜色，例如活跃。

我的 HTML 是:

<div class="container">
    <div class="content nobg">
        <div class="sideEffectBox text-center medium-6 columns">
            <div class="panel hlib"> <img src="http://upload.wikimedia.org/wikipedia/commons/2/24/Icon_Transparent_Loupe_256x256.png"/>

 <span class="linkText">Record Side Effects</span>

            </div>
        </div>
    </div>
</div>

我的 CSS 是:

.container .content .panel.hlib {
    background: #ECC100;
    border:none;
    text-align:center;
}

.sideEffectBox :active{
    background: pink;
}
.container .content .panel.hlib :active {
    background: pink;
    border:10px black solid;
}
.container .content .panel.hlib img {
    display: block;
    padding-bottom: 24px;
    height: 110px;
}
.container .content .panel.hlib .linkText {
    font-size: 20px;
    color: #605748;
    display: block;
    text-align: center;
}

我有一个 JS fiddle 位于:http://jsfiddle.net/liammccann1992/hSu4c/300/

我遇到的问题是它只是将我点击的东西设置为事件状态，例如文本或图像，但 parent 不应该主动参与吗？

无论如何我可以强制 parent 活跃而不是他们吗？

Answer 1

如我的评论所述，删除 :active 之前的空格，应该可以解决 :)