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!

Did you mean `visibility` and not `display`? – BoltClock Dec 10 '12 at 09:37 — BoltClock, Dec 10 '12 at 09:37

Philipp Hofmann · Accepted Answer · 2012-12-10T10:20:58.237

11

.myLinks{
  display:none;
}

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

edited Dec 10 '12 at 10:20

answered Dec 10 '12 at 09:45

Philipp Hofmann

3,388
26
32

Rohit Azad Malik · Answer 2 · 2012-12-10T09:50:39.397

1

Used to this css

.myLinks{
display:none;
}

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

Demo

or

-------

.myLinks{
    visibility:hidden;
    }

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

Demo2

edited Dec 10 '12 at 09:50

answered Dec 10 '12 at 09:44

Rohit Azad Malik

31,410
17
69
97

Thanks for your help but the goal was to display the links only in the hovered content, not to display the nested content. – ndemoreau Dec 10 '12 at 10:04

css hover nested classes propagates

2 Answers2

-------