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

时间:2015-11-24 16:05:14

标签: css less

我有一个HTML section元素,定义如下:

<section class="sectionClass">
  <h2>
      some text
   </h2>
</section>
.sectionClass {
  h2 {
    display:none;
  }
}

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

更新:

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

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

1 个答案:

答案 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;
}