Question

.onoffswitch-checkbox:checked ~ .onoffswitch-inner:hover {
   background: #0095cd;
}

这可能吗？

基本上，当选中兄弟复选框时，我想在.onoffswitch-inner上使用悬停类。

Answer 1

继续吧。它有效：

http://jsfiddle.net/trungdq88/z38Y6/1/

HTML

<label>
    <input type="checkbox" class="onoffswitch-checkbox"/> Check this box
    <div class="onoffswitch-inner">And hover here</div>
</label>

CSS：

.onoffswitch-checkbox:checked ~ .onoffswitch-inner:hover {
   background: #0095cd;
}

Answer 2

http://jsfiddle.net/EyjEZ/7/

注意：label标签最好具有一个for属性，该属性可以被复选框引用。出于可访问性和可用性的原因。因此，屏幕阅读器喜欢它，它会扩大点击区域并添加标签焦点。

这将使该类的复选复选框的任何兄弟元素获得该悬停样式。请参阅：http://jsfiddle.net/YRe3n/1/

IE 8不支持：已选中

 <form action="#" method="post">
  <fieldset>
 <input type="checkbox" class="onoffswitch-checkbox" id="foo" name="bar" /><label for="foo">Foo</label>
 <p class="onoffswitch-inner">This is the inner</p>
  </fieldset>
</form>

.onoffswitch-checkbox:checked ~ .onoffswitch-inner:hover {
   background: #0095cd;
}

如果您只需要定位下一个兄弟元素，这也可以。

.onoffswitch-checkbox:checked + label + .onoffswitch-inner:hover {
   background: #0095cd;
}

http://jsfiddle.net/2scGR/1/

CSS - 双伪类..这是可能的

2 个答案: