Search code examples
csshovernestedpropagation

css hover nested classes propagates

I know this is a classical one but I find no answer on the net:

I have this html code:

<div class="comment>
  <div class="myLinks">Some Links</div>
  <div class="comment">
    <div class="myLinks">Some Links</div>
  </div>
</div>

Then I have this css (written in scss):

.myLinks {
  display: hidden;
}

.comment {
  &:hover {
    .myLinks {
      display: visible;
    }
  }
}

When the pointer goes above the first comment block, the nested one's hover effect is also activated. What I want is my links to be visible only in the comment being hovered, not in his parents or children.

How can I do this? Thanks!

Solution 
  • .myLinks{
  display:none;
}

.comment:hover > .myLinks {
  display: block;
}