Question

我有一组嵌套的评论。我的目标是显示回复＆＃39;单独悬停每个评论时的选项。这意味着我不想要回复＆＃39;显示我正在悬停的评论的父/兄弟/子女的选项。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

这完全可以用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 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>

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

2 个答案: