CSS悬停嵌套类传播答案

【问题标题】：css hover nested classes propagatesCSS悬停嵌套类传播
【发布时间】：2012-11-27 16:55:50
【问题描述】：

我知道这是经典的，但我在网上找不到答案：

我有这个 html 代码：

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

然后我就有了这个css（用scss写的）：

.myLinks {
  display: hidden;
}

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

当指针移到第一个注释块上方时，嵌套的悬停效果也被激活。我想要的是我的链接只在被悬停的评论中可见，而不是在他的父母或孩子中。

我该怎么做？谢谢！

【问题讨论】：

【解决方案1】：

.myLinks{
  display:none;
}

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

【讨论】：

【解决方案2】：

习惯了这个css

.myLinks{
display:none;
}

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

或

-------

.myLinks{
    visibility:hidden;
    }

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

【讨论】：