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

【问题标题】：Don't style parent element on hover不要在悬停时设置父元素样式
【发布时间】：2012-03-28 22:05:16
【问题描述】：

我正在制作一个允许嵌套 cmets 的评论框，其结构基本上是这样的：

<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 来突出当前悬停元素的背景；但是，这也会导致所有父元素都被突出显示。这是我要避免的。

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

【问题讨论】：

呃，为什么不简单地给较低级别的articles 一个不同的类或额外的类，你可以设置样式？
不能给每篇文章一个不同的类名吗？
添加不同的类名对我有什么帮助？

标签： html css

【解决方案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

【讨论】：

【解决方案2】：

您可能希望尝试使用跨浏览器替代 pointer-events，如 here 所述；但是，为了更易于维护，我仍然会更改应用于您的元素的类的结构。

【讨论】：