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

Question

我有一组嵌套的 cmets。我的目标是分别悬停每条评论时显示“回复”选项。这意味着我不希望我悬停的评论的父/兄弟/子显示“回复”选项。

我发现的唯一类似问题是：Can I control CSS selection for :hover on nested elements? 我什至不确定他的需求是否相同，而且小提琴似乎不起作用。

我准备了一个fiddle，所以你最好明白我的意思：

.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 单独定位 cmets

例子：

.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 example)

Answer 2

不改变你的标记，而不是悬停父.comment，你可以悬停相邻的兄弟（使用+）.text（因为它总是在那里）

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

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

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

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

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