我在中有一个<select>框<form>，当其值为时other，我希望.applicableSupportCase隐藏具有该类的元素。我正在尝试仅使用CSS来做到这一点。我究竟做错了什么？
.applicableSupportCase {
transition: transform 0.3s ease, opacity 0.3s ease;
}
#typeBox[value="other"] ~ .applicableSupportCase{
opacity: 0;
transform: scaleY(0);
}
<select class="contactField" id="typeBox">
<option value="supportCase" selected="selected">Support case</option>
<option value="other">Other</option>
</select>
<label class="applicableSupportCase">Device:</label>
类中有更多元素applicableSupportCase，但是您明白了。
使用<select>项目无法完成此操作，但是由于:checked复选框和单选按钮的伪类状态，您可以使用这些内容来完成所需的操作：
的HTML
<input type="radio" id="supportCase" name="radios">
<label for="supportCase">Support Case</label>
<input type="radio" id="other" name="radios">
<label for="other">Other</label>
<br />
<label class="applicableSupportCase">Device:</label>
的CSS
input[id=other]:checked ~ .applicableSupportCase {
visibility:hidden;
}
我使用了可见性，但是您可以将属性更改为所需的任何属性。
如果您想轻松进出，请使用:not(:checked)伪类创建相同的语句：
input[id=other]:not(:checked) ~ .applicableSupportCase {
//whatever ease(out) you want here
}
JSFiddle：http : //jsfiddle.net/ja2ud1Lf/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句