Question

我想通过点击他的孩子而不使用javaScript 来更改某些父元素的样式。例如：点击.button或.text-container必须更改其父级背景颜色（.right-side / .left-side）。

<div class="main-container">  
    <div class="table parent-size">
        <div class="table-cell parent-half-width left-side">
            <div class="table parent-size">   
                <div class="table-cell vertical-align-middle to-right-inline text-container">
                    Left side text      
                </div>
                <div class="table-cell vertical-align-middle to-center-inline">
                    <span class="button"></span>
                </div>      
            </div>        
        </div>
        <div class="table-cell parent-half-width right-side active">
            <div class="table parent-size">
                <div class="table-cell vertical-align-middle to-center-inline">
                    <span class="button active"></span>
                </div>      
                <div class="table-cell vertical-align-middle to-left-inline text-container">
                    Right side text
                </div> 
            </div>
        </div>
    </div>
</div>

.main-container {
    width: 600px;
    height: 60px;
    color: #fff;
    font-size: 14px;
}
.left-side, .right-side {
    background: #212121;
}
.right-side.active {
    background: #E3A215;
}
.left-side.active {
    background: #5D7FE6;
}
.button {
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
    border: 3px solid #cfcfcf;
}

See Fiddle

Answer 1

我通过对此元素使用隐藏input type="checkbox"和label来解决此问题。输入位于目标父块（＆＃34; .left-side＆＃34;）上方，标签位于.left-side块内。单击标签切换输入条件。在css中我使用css3伪类"checked"。

在我的情况下，我有一个必须切换的两个按钮。活动按钮具有另一种背景色和另一种.button视图，这就是我使用input type="radio"的原因。

也许这对某些人有用。解决方案只需要几个css行和几个额外的html标签。

<div class="main-container">

    <div class="table parent-size">

        <input id="answer-left" class="css-checkbox" name="votingButton" type="radio" />
        <div class="table-cell parent-half-width left-side answer-wrapper">
            <div class="table parent-size">   
                <div class="table-cell vertical-align-middle to-right-inline">
                    <label for="answer-left" class="answer">
                        <div class="table-cell vertical-align-middle to-right-inline text-container">
                            Left side text      
                        </div>
                        <div class="table-cell vertical-align-middle to-center-inline button-wrap">
                            <span class="button">&nbsp;</span>
                        </div> 
                    </label>
                </div>
            </div>        
        </div>
        ...
    </div>
</div> 

.css-checkbox {
     display: none;
}
.css-checkbox:checked + .answer-wrapper.left-side {
    background: #E3A215;
}
.css-checkbox:checked + .answer-wrapper.right-side {
    background: #5D7FE6;
}
.css-checkbox:checked + .answer-wrapper .button {
    width: 22px;
    height: 22px;
    background: url(http://goo.gl/Yw9qN1) no-repeat;
    border: none;
}

See Fiddle

如何通过点击没有javascript的孩子来更改父元素css-properties

1 个答案: