html - 不要在悬停时设置父元素的样式

Question

我正在制作一个允许嵌套评论的评论框，其基本结构如下:

<article class="comment">
  Level 1 comment
  <article class="comment">
    Level 2 comment
  </article>
  <article class="comment">
    Level 2 comment
    <article class="comment">
      Level 3 comment
    </article>
  </article>
</article>

我使用 .comment:hover 来突出显示当前悬停元素的背景；但是，这会导致所有父元素也被突出显示。这是我要避免的。

与此同时，我想保留嵌套结构，以便每个评论的突出显示也包含悬停评论的子项。

Answer 1

看看

<article class="comment">
    <span>Level 1 comment</span>
  <article class="comment">
      <span>Level 2 comment</span>
  </article>
  <article class="comment">
    <span>Level 2 comment</span>
    <article class="comment">
      <span>Level 3 comment</span>
    </article>
  </article>
</article>​

CSS

article > span:hover
{
    background-color: red;
}​

基本上你只需要将它们包装成某种东西就可以成为单数

http://jsfiddle.net/bYmjf/1 <-- 工作示例