Safari和Chrome以及Opera和Firefox可以处理:hover伪类和邻近兄弟选择器:
a:hover + div {}
这有效.
但是,当添加另一个相邻兄弟时:
div:hover + a + div {}
Webkit崩溃了.
但是,如果你第一次将鼠标悬停在<a>与随后的悬停<div>样式应用,因为它应该.
我更加困惑,因为如果你添加:
div:hover ~ div {}
无论是否声明了样式,它都会按照应有的方式开始工作.
我看到这个问题:
对于OS X.
有任何想法吗?
在这个问题" CSS3选择器,像jQuery的.click()? "我发布了一个回答使用的:checked状态input,type="checkbox"以切换元素的显示.
这是我在答案中发布的演示的HTML:
<input type="checkbox" id="switch" />
<nav>
<h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>
Run Code Online (Sandbox Code Playgroud)
和CSS(为了简洁而剥离过渡):
#switch {
display: none;
}
#switch + nav {
height: 0;
overflow: hidden;
/* transitions followed */
}
#switch:checked + nav {
height: 4em;
color: #000;
background-color: #ffa;
/* transitions followed */
}
label {
cursor: pointer;
}
Run Code Online (Sandbox Code Playgroud)
有一次,我张贴发生,我认为我们可以在答案也切换的文本label用于触发复选框的状态变化,使用下面的选择(已修订label的文本'导航’):
label {
display: inline-block;
cursor: …Run Code Online (Sandbox Code Playgroud)