css hover nested classes propagates

Question

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!

Answer 1

.myLinks{
  display:none;
}

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

Answer 2

Used to this css

.myLinks{
display:none;
}

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

Demo

or

-------

.myLinks{
    visibility:hidden;
    }

    .comment:hover .myLinks{
    visibility: visible;
    }

Demo2