长期以来人们一直被称为许多选择器问题的答案,甚至有些人认为完全没有必要,但Selectors Level 4伪类：has(),更好地称为父选择器,是唯一一个来自Level 4的选择器根据
W3 Spec的最新版本,可以在CSS中实现.原因是它效率低下且已经被JavaScript功能所覆盖.
考虑到这一点,我一直在考虑如何使用纯CSS伪造这种效果.下面我提供了一种方法,Q& A风格,以实现作为答案的效果,但想知道是否有其他方法.具体来说,更有效的CSS实现,或响应式CSS实现.
解决方法
在Gecko和WebKit中,某些选择器可以使用< label for>“跳转”.和相关的<输入>元素位于任何地方这种做法不可靠,但仍然很有趣.
#before {
left: -9999px;
position: absolute;
}
#parent {
padding: 0.5em;
}
#before:hover + #parent {
background-color: #123;
color: white;
}
#label {
border: 0.1em solid #678;
border-radius: 0.2em;
display: inline-block;
padding: 0.5em;
}
<input type="checkBox" id="before"> <div id="parent"> <label for="before" id="label">Hover over me!</label> </div>
(如果使用Chrome,则可能需要点击一次.)
