Prevent mouse events to go through child elements

Question

In the example below, mouse events are going through the child (list items) when the mouse is between the item label and the horizontal colored bar.

This results in the item de-emphasizing although the mouse in still in its bounds. This is because of the margin I think... how could I prevent this?

const parent = document.querySelectorAll(".parent")[0];
const items = document.querySelectorAll(".parent li");

items.forEach((item) =>
    item.addEventListener("mouseenter", () => setHint(item))
);

parent.addEventListener("mouseout", () => setHint(false));

function setHint(item) {
    if (item) {
        items.forEach((i) => {
            i.classList.add(i === item ? "hovered" : "not-hovered");
        });
    } else {
        items.forEach((i) => {
            i.className = "";
        });
    }
}

.parent {
  margin: 20px;
  padding: 20px;
  list-style: none;
  background: lightblue;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.parent li {
  width: 100%;
  margin-bottom: 16px;
  line-height: 1.4;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.parent li.hovered {
  opacity: 1;
}

.parent li.not-hovered {
  opacity: 0.1 !important;
}

.parent li > span {
  display: flex;
  justify-content: space-between;
}

.child-label {
  font-size: 14px;
  margin-bottom: 4px;
}

.child-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
  background: rgb(186, 186, 186);
}

.child-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  transition: width 0.4s ease;
  background: #fe512c;
}


    
        
            Lorem ipsum
            8 045
        
        
            
        
    
    
        
            Dolor sit amet
            8 701
        
        
            
        
    
    
        
            Consectetur adipiscing
            144
        
        
            
        
    
    
        
            Sed do eiusmod
            806
        
        
            
        
    
    
        
            Incididunt ut labore
            149
        
        
            
        
    
    
        
            Dolore magna aliqua
            470
        
        
            
        
    
    
        
            Enim ad minim veniam
            73
        
        
            
        
    
    
        
            Cupidatat non proident
            87
        
        
            
        
    
    
        
            Reprehenderit in voluptate
            3 461

GrahamTheDev · Accepted Answer

If you want to use your current setup and JS all you need is pointer-events: none adding to your label and bars.

Because you are essentially targeting mouseover (via mouseenter and mouseout) for the

, when your mouse is over the label or bar it is no longer the item that is receiving mouseover and so triggers mouseout.

By adding pointer-events:none we are telling the browser to ignore all events on this item and let them pass through to the item below.

const parent = document.querySelectorAll(".parent")[0];
const items = document.querySelectorAll(".parent li");

items.forEach((item) =>
    item.addEventListener("mouseenter", () => setHint(item))
);

parent.addEventListener("mouseout", () => setHint(false));

function setHint(item) {
    if (item) {
        items.forEach((i) => {
            i.classList.add(i === item ? "hovered" : "not-hovered");
        });
    } else {
        items.forEach((i) => {
            i.className = "";
        });
    }
}

.parent {
  margin: 20px;
  padding: 20px;
  list-style: none;
  background: lightblue;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.parent li {
  width: 100%;
  margin-bottom: 16px;
  line-height: 1.4;
  transition: opacity 0.2s ease;
  cursor: pointer;
  display: block;
}

.parent li.hovered {
  opacity: 1;
}

.parent li.not-hovered {
  opacity: 0.1 !important;
}

.parent li > span {
  display: flex;
  justify-content: space-between;
}

.child-label {
  font-size: 14px;
  margin-bottom: 4px;
  pointer-events: none;
}

.child-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
  background: rgb(186, 186, 186);
  pointer-events: none;
}

.child-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  transition: width 0.4s ease;
  background: #fe512c;
  pointer-events: none;
}


    
        
            Lorem ipsum
            8 045
        
        
            
        
    
    
        
            Dolor sit amet
            8 701
        
        
            
        
    
    
        
            Consectetur adipiscing
            144
        
        
            
        
    
    
        
            Sed do eiusmod
            806
        
        
            
        
    
    
        
            Incididunt ut labore
            149
        
        
            
        
    
    
        
            Dolore magna aliqua
            470
        
        
            
        
    
    
        
            Enim ad minim veniam
            73
        
        
            
        
    
    
        
            Cupidatat non proident
            87
        
        
            
        
    
    
        
            Reprehenderit in voluptate
            3 461

Prevent mouse events to go through child elements

Answers (2)

Related Questions