Question

我有一个像这样的递归结构：

.comment
  .comment-delete
  .comment-replies
     .comment
        .comment-delete
        .comment-replies
           ...

隐藏了.comment-delete的可见性。我希望在悬停.comment-delete时可以看到.comment，但是当悬停在较低级.comment时，顶级.comment-delete仍然可见。

我想悬停.comment，只有下一个.comment-delete可见，而不是任何更高级.comment-delete。

问题在于，将第二级.comment =悬停在第一级.comment上。

除了.comment，我不能把：悬停在其他任何内容上。

问题是如何制作它以便在第二级悬停.comment只会让第二级评论的评论删除可见，而不是第一级评论的删除按钮？

Fiddle

＆＃13;

.comment {
  
}
.comment-replies {
  padding-left: 20px
}
.comment-delete {
  display: inline-block;
  width:10px;
  height:10px;
  background: red;
  visibility: hidden;
}

.comment:hover >.comment-delete {
  visibility: visible;
}

＆＃13;

<div class="comment">
  1st level comment
  <div class="comment-delete"></div>
  <div class="comment-replies">
        <div class="comment">
           2nd level comment
           <div class="comment-delete"></div>
           <div class="comment-replies"></div>
        </div>
  </div>
</div>

＆＃13;

Answer 1

我会忘记尝试使用CSS或JS来实现这一点，并且只是以不同的方式构建标记。像这样：

＆＃13;

.comment {
  
}
.comment-replies {
  padding-left: 20px
}
.comment-delete {
  display: inline-block;
  width:10px;
  height:10px;
  background: red;
  visibility: hidden;
}

.comment-body:hover >.comment-delete {
  visibility: visible;
}

＆＃13;

<div class="comment">
  <div class="comment-body">
    1st level comment
    <div class="comment-delete"></div>
  </div>
  <div class="comment-replies">
    <div class="comment">
      <div class="comment-body">
        2nd level comment
        <div class="comment-delete"></div>
      </div>
      <div class="comment-replies"></div>
    </div>
  </div>
</div>

＆＃13;

CSS：如何在悬停时打破递归

1 个答案: