我有一个HTML section元素,定义如下:
<section class="sectionClass">
<h2>
some text
</h2>
</section>
.sectionClass {
h2 {
display:none;
}
}
现在,当页面加载时,不显示h2,这是显而易见的。现在,我希望当我悬停在该部分时显示h2,然后当我不悬停时它会隐藏。我怎么能用LESS做到这一点?
更新:
我添加了以下代码,但即使我将鼠标悬停在该部分上也不会显示h2元素。
.sectionClass :hover {
h2 {
display:block;
}
}
答案 0 :(得分:3)
将:hover
伪类添加到父.sectionClass:hover h2
(example)。
您可以使用基本上引用父选择器的&
operator来实现此目的。
.sectionClass {
&:hover {
h2 {
display: block;
}
}
h2 {
display:none;
}
}
编译为:
.sectionClass:hover h2 {
display: block;
}
.sectionClass h2 {
display: none;
}