:hover select target only, not parents with same class

Question

How do I make this only fire :hover for the target element (ignoring the parents)?

Assume this is recursive design of object inside object, therefore with the same classes and an autogenerated id.

 .group:hover { background-color: red; } .group { border: 1px solid black; width: 100px; padding: 20px; } 

 <div id="g1" class="group">aaaa <div id="g2" class="group">bbbb <div id="g3" class="group">cccc </div> </div> </div> 

Answer 1

Since you tagged the question with javascript you can achieve this using it. The key is to use .stopProgagation() which will stop events from "falling through" down to your other elements.

See example below:

 document.querySelectorAll(".group").forEach(elem => { elem.addEventListener('mouseover', function(e) { e.stopPropagation(); this.classList.add('group-hover'); }); elem.addEventListener('mouseout', function(e) { this.classList.remove('group-hover'); }); }); 

 .group-hover { background-color: red; } .group { border: 1px solid black; width: 100px; padding: 20px; } 

 <div id="g1" class="group">aaaa <div id="g2" class="group">bbbb <div id="g3" class="group">cccc </div> </div> </div> 

Alternatively, you could intead use e.target to get the target of the event if you wish not to use stopPropagation() :

 document.querySelectorAll(".group").forEach(elem => { elem.addEventListener('mouseover', e => e.target.classList.add('group-hover')); elem.addEventListener('mouseout', e => e.target.classList.remove('group-hover')); }); 

 .group-hover { background-color: red; } .group { border: 1px solid black; width: 100px; padding: 20px; } 

 <div id="g1" class="group">aaaa <div id="g2" class="group">bbbb <div id="g3" class="group">cccc </div> </div> </div> 

Answer 2

Only with JS, and using events delegate for simpler way

 const All_g = document.querySelector('#g1'); All_g.onmouseover = function(event) { let target = event.target; target.style.background = 'red'; }; All_g.onmouseout = function(event) { let target = event.target; target.style.background = ''; }; 

 .group { border: 1px solid black; width: 100px; padding: 20px; } 

 <div id="g1" class="group">aaaa <div id="g2" class="group">bbbb <div id="g3" class="group">cccc </div> </div> </div> 

some explanations :=> https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave

Answer 3

You can do it in the following way:

var elements = document.getElementsByClassName('group');
var lastElement = null;
elements.each(element =>{
    lastElement = element;
});
lastElement.on('hover', function(){
    //do anything you wish with element
})

Answer 4

Approach 1

Register hover event to toggle class and use event.stopPropagation();

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

The bubbles read-only property of the Event interface indicates whether the event bubbles up through the DOM or not.

https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles

Approach 2

Mouseenter event - By design it does not bubble - so don't have to perform event.stopPropagation()

Though similar to mouseover, it differs in that it doesn't bubble and that it isn't sent to any descendants when the pointer is moved from one of its descendants' physical space to its own physical space.

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event