css - CSS悬停嵌套类传播

Question

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

我有这个 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;
    }
  }
}

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

我怎样才能做到这一点？谢谢！

score 9 · Accepted Answer

9

.myLinks{
  display:none;
}

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

于 2012-12-10T09:45:18.910 回答

score 0 · Accepted Answer

习惯了这个css

.myLinks{
display:none;
}

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

或者

--------

.myLinks{
    visibility:hidden;
    }

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