CSS：如何打破遞歸時懸停

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

.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; 
 
}

<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>

Answer 1

我會忘記試圖角力的CSS或JS得到這個工作，只是構建您的標記不同。事情是這樣的：

.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; 
 
}

<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>