css - 将悬停添加到 HTML 部分元素 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;
}