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

我正在制作一个注释框，允许嵌套注释，基本结构如下：

<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来突出显示当前悬停元素的背景；但是，这也会导致所有父元素都被突出显示。这是我想要避免的。
同时，我希望保留嵌套结构，以便每个注释的突出显示也包含悬停的注释的子级。

最佳答案

看一看

<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

关于html - 不要在悬停时设置父元素的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9916335/