将鼠标悬停添加到HTML Section Element LESS

Question

我有一个HTML section元素，定义如下：

<section class="sectionClass">
  <h2>
      some text
   </h2>
</section>

.sectionClass {
  h2 {
    display:none;
  }
}

现在，当页面加载时，不显示h2，这是显而易见的。现在，我希望当我悬停在该部分时显示h2，然后当我不悬停时它会隐藏。我怎么能用LESS做到这一点？

更新：

我添加了以下代码，但即使我将鼠标悬停在该部分上也不会显示h2元素。

.sectionClass :hover {
  h2 {
    display:block;
  }
}

Answer 1

将:hover伪类添加到父.sectionClass:hover h2 (example)。

您可以使用基本上引用父选择器的& operator来实现此目的。

.sectionClass {
  &:hover {
    h2 {
      display: block;
    }
  }
  h2 {
    display:none;
  }
}

编译为：

.sectionClass:hover h2 {
  display: block;
}
.sectionClass h2 {
  display: none;
}