CODEWITHSUNDEEP
htmlcss
avramov
avramov

Reputation: 2114

Don't style parent element on hover

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.

Upvotes: 1

Views: 147

Answers (2)

Oleg
Oleg

Reputation: 24988

You may want to experiment with a cross-browser alternative to pointer-events as discussed here; however I'd still changing the structure of classes applied to your elements instead for easier maintainability.

Upvotes: 1

The Angry Saxon
The Angry Saxon

Reputation: 792

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

Upvotes: 3

Related Questions