Only applying hover effects to deepest selector

Question

I have multiple divs as such:

<div class="hover-effect">
   <div class="hover-effect">
      <div class="hover-effect">
         <div class="hover-effect"></div>
      </div>
   </div>
</div>
<div class="hover-effect">
    <div class="hover-effect"></div>
</div>
<div class="hover-effect"></div>
<div class="hover-effect"></div>

And I'm trying to accomplish a hover effect on only the deepest element if it is the one being hovered. Currently it also applies the effect to the parent elements. How would I go by avoiding this?

Try https://api.jquery.com/event.stoppropagation/ – Abhi Aug 13 '16 at 17:00 — Abhi, Aug 13 '16 at 17:00

score 0 · Answer 1 · answered Aug 13 '16 at 17:08

I think it will be possible using Javascript

see this : https://jsfiddle.net/eszujrwm/

$(".hover-effect").each(function(){
    if( $(this).find(".hover-effect").length == 0 ){
        $(this).mouseenter(function() {
        $(this).addClass("hovered");
    }).mouseleave(function() {
         $(this).removeClass("hovered");
    });
    }
})

This code selects all .hover-effect elements, and for every one of them see if it have a child with class "hover-effect" if no It's the deepest element so we add a mouseenter/leave event

In CSS, we define a class "hovered" which contains style for onhover:

.hovered{
    background-color:green;
}

score 0 · Answer 2 · edited May 23 '17 at 12:32

There was topic about deepest element here

Following this answer, Gerald Fullman wrote jQuery plugin called .deepest which, i think, can help you.

I can't test it right now, but i think it will be like:

$(dokument).ready(function() {
  $('.hover-effect').mouseover(function() {
    $(this).deepest('.hover-effect'); // ...
  });
});

Try to avoid use stopPropagation, because of potential problems. Read more here

score 0 · Answer 3 · answered Aug 13 '16 at 18:02

You can use :not(), :has() to select element which do not have a specific selector as a child node

$(".hover-effect:not(:has(.hover-effect))")
.hover(function() {
  $(this).toggleClass("deepest")
});

.deepest {
  background:purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover-effect">
  not deepest
   <div class="hover-effect">
     not deepest
      <div class="hover-effect">
        not deepest
         <div class="hover-effect">deepest</div>
      </div>
   </div>
</div>
<div class="hover-effect">
  not deepest
    <div class="hover-effect">deepest</div>
</div>
<div class="hover-effect">deepest</div>
<div class="hover-effect">deepest</div>

Only applying hover effects to deepest selector

3 Answers3