Question

I would like to modify the styles of .childElement when .parentElement:hover is fired.

Something like this:

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

Is it possible?

Answer 1

I think you are looking for:

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

Note: CSS does not currently support nesting, however, it is planned. Currently, the proposed syntax is as follows:

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