Home/ Questions/Q 7718775
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T03:15:00+00:00

I’m making a comment box which allows for nested comments and is basically structured

  • 0

I’m making a comment box which allows for nested comments and is basically structured like this:

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

I use .comment:hover to highlight the background of the currently hovered element; however, this causes all parent elements to be highlighted, too. This is what I’m trying to avoid.

At the same time, I’d like to keep the nested structure, so that each comment’s highlight encloses the hovered comment’s children, too.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have a look at 

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

    Basically you just need to wrap them into something in order to become singular

    http://jsfiddle.net/bYmjf/1 <– Working example

    • 0