仅在CSS中为嵌套元素选择立即悬停的元素

Question

我有一组嵌套的评论.我的目标是在单独悬停每个评论时显示"回复"选项.这意味着我不希望"回复"选项显示我正在悬停的评论的父/兄弟/子女.

我发现的唯一类似问题是:我可以控制CSS选择:悬停在嵌套元素上吗？我甚至不确定他的需求是否相同,而且小提琴似乎也不起作用.

我准备了一个小提琴,所以你最好明白我的意思:

.comment {
  padding: 10px;
  border: 1px solid black;
  margin-top: 10px;
}
.text {} .comment:hover > .reply {
  display: inline-block;
}
.reply {
  display: none;
}
.children-comments {
  margin-left: 50px;
  margin-top: 10px;
}

<div class="comment">
  <a class="text">wohoo</a>
  <a class="reply">reply</a>
  <div class="children-comments">
    <div class="comment">
      <a class="text">wohoo</a>
      <a class="reply">reply</a>
      <div class="children-comments">

      </div>
    </div>
    <div class="comment">
      <a class="text">wohoo</a>
      <a class="reply">reply</a>
      <div class="children-comments">
        <div class="comment">
          <a class="text">wohoo</a>
          <a class="reply">reply</a>
          <div class="children-comments">
            <div class="comment">
              <a class="text">wohoo</a>
              <a class="reply">reply</a>
              <div class="children-comments">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="comment">
      <a class="text">wohoo</a>
      <a class="reply">reply</a>
      <div class="children-comments">

      </div>
    </div>
  </div>
</div>

请注意,>在选择器中使用确实可以忽略兄弟元素,但它仍然选择父元素.换句话说,无论你悬停哪个评论,他们的父母都将始终显示"回复"选项.

这可以只用CSS完成吗？我对js解决方案持开放态度,但如果只有CSS解决方案,我会非常高兴.

Answer 1

您最好的选择是稍微更改标记并添加包装器:

<div class="comment">
  <div class="content">   <!-- Here -->
    <a class="text">wohoo</a>
    <a class="reply">reply</a>
  </div>

通过div为内容添加包装器,您可以使用单独定位注释.content:hover > .reply

例:

.comment {
  padding: 10px;
  border: 1px solid black;
  margin-top: 10px;
}

.text {}

.content:hover > .reply {
  display: inline-block;
}

.reply {
  display: none;
}

.children-comments {
  margin-left: 50px;
  margin-top: 10px;
}

<div class="comment">
  <div class="content">
    <a class="text">wohoo</a>
    <a class="reply">reply</a>
  </div>
  <div class="children-comments">
    <div class="comment">
      <div class="content">
        <a class="text">wohoo</a>
        <a class="reply">reply</a>
      </div>
      <div class="children-comments">
        <div class="comment">
          <div class="content">
            <a class="text">wohoo</a>
            <a class="reply">reply</a>
          </div>
        </div>
        <div class="children-comments">
          <div class="comment">
            <div class="content">
              <a class="text">wohoo</a>
              <a class="reply">reply</a>
            </div>
            <div class="children-comments">
              <div class="comment">
                <div class="content">
                  <a class="text">wohoo</a>
                  <a class="reply">reply</a>
                </div>
                <div class="children-comments">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="comment">
        <div class="content">

          <a class="text">wohoo</a>
          <a class="reply">reply</a>
          <div class="children-comments">
          </div>
        </div>
      </div>
    </div>
  </div>

内容包装器将扩展到注释的实际内容区域(这是最有意义的).

但是,您也可以通过使用定位样式使包装器扩展到整个注释块(不仅仅是注释的内容).例如:

/* OPTIONAL - These style changes make the content
 * wrapper cover the entire comment block.
 */
.comment {
  padding: 10px;
  border: 1px solid black;
  margin-top: 10px;
  position:relative;
}

.comment .content {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}

这取决于你想要的行为.

(jsFiddle示例)