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

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＆lt; - 工作示例

Answer 2

您可能希望尝试使用跨浏览器替代指针事件，如所讨论的here;但是我仍然在改变应用于元素的类的结构，以便更容易维护。