css - 将鼠标悬停在父元素上时是否可以设置子元素的样式？

Question

我想修改.childElement何时.parentElement:hover被触发的样式。

像这样的东西：

<style type="text/css">
.parentElement:hover {
  .childElement {
   display:block;
  }
}
</style>
<div class="parentElement">
  <div class="childElement"></div>
</div>

是否可以？

Answer 1

我认为您正在寻找：

.parentElement:hover .childElement {
  display:block;
}

注意： CSS 目前不支持嵌套，但是，它是计划中的。目前，建议的语法如下：

.parentElement:hover {
  /* Note the ampersand (&) */
  & .childElement {
   display:block;
  }
}