title: css hover nested classes propagates
body: <p>I know this is a classical one but I find no answer on the net:</p>
  
  <p>I have this html code:</p>
  
  <pre><code>&lt;div class="comment&gt;
    &lt;div class="myLinks"&gt;Some Links&lt;/div&gt;
    &lt;div class="comment"&gt;
      &lt;div class="myLinks"&gt;Some Links&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I have this css (written in scss):</p>
  
  <pre><code>.myLinks {
    display: hidden;
  }
  
  .comment {
    &amp;:hover {
      .myLinks {
        display: visible;
      }
    }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>How can I do this? Thanks!</p>