# Mouseover event over multiple elements flickers

**URL:** https://forum.kirupa.com/t/mouseover-event-over-multiple-elements-flickers/642275
**Category:** web dev
**Created:** [March 31, 2020, 10:51pm UTC](https://forum.kirupa.com/t/mouseover-event-over-multiple-elements-flickers/642275 "2020-03-31T22:51:22Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![TheOne\_TheMany](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/theone_themany/32/11351_2.png) [@TheOne\_TheMany](https://forum.kirupa.com/u/TheOne_TheMany)
#### Post date: [March 31, 2020, 10:51pm UTC](https://forum.kirupa.com/t/mouseover-event-over-multiple-elements-flickers/642275/1 "2020-03-31T22:51:22Z")

</div>

I’m stuck creating code that’s lean and want to use only JavaScript for now.

[http://jsfiddle.net/TheOne\_TheMany/30zdkrys](http://jsfiddle.net/TheOne_TheMany/30zdkrys)

The problem I’m having is the mouseover state, when it goes over the `<li>` it works, but flickers when going over the `<div>` delete area. I know why it does that(After lots of research). So I tried mouseleave, but I need to have multiple ID on the `<li>` to make it work.

Is there a cleaner way of coding without creating so many ID or multiple event listeners. Specially if Im going to add more `<li>` or delete them.

Thanks in advance for the help.

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [March 31, 2020, 11:12pm UTC](https://forum.kirupa.com/t/mouseover-event-over-multiple-elements-flickers/642275/2 "2020-03-31T23:12:31Z")

</div>

Its not that complicated right now! You’re only using 3 listeners for each of those buttons which is pretty good. You’re not going to get a whole lot better as far as reducing those 😉

It sounds like you kind of know whats going on. And using mouseenter/mouseleave is kind of what you want, but it doesn’t work with delegation (adding one event to a parent) - which basically the whole point of their existence. So if you want to keep using one listener for them all, you’ll want to stick to mouseover/mouseout, but you’ll need to do a better job of recovering when a mouseout happens. This means in ever mouseover, you need to see if the target is in the `<li>` not just _being_ the `<li>`, and if so, restore the class then too. This way when you move the mouse over to the delete button, and mouseout is called for the `<li>`, the mouseover for the `<div>` will see that its in the `<li>` and run the over for li code.

You can use `closest()` to find the parent shopping list `<li>` if it exists.

```javascript
    const listItem = item.target.closest('#myShoppingList li');
     if(listItem){
        listItem.classList...

```

---

<div class="post-metadata">

### Author: ![TheOne\_TheMany](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/theone_themany/32/11351_2.png) [@TheOne\_TheMany](https://forum.kirupa.com/u/TheOne_TheMany)
#### Post date: [April 1, 2020, 12:40am UTC](https://forum.kirupa.com/t/mouseover-event-over-multiple-elements-flickers/642275/3 "2020-04-01T00:40:34Z")

</div>

Thanks for that, I’m starting to understand better on traversing through the DOM to select elements… taking awhile lol.

The `closest()` is a new one for me, and its kind of making sense. The only issue I’m seeing is that it’s calling the class function for the `<li>` onto the `<div>` when the mouse is moving over the `<div>` (which is the delete section)

> const listItem = item.target.closest(‘#myShoppingList li’);

> if(listItem) {  
> item.target.classList.add(‘onLi’);  
> item.target.lastChild.classList.add(‘containerDelete’);  
> }

It also calls the other function to it, which makes sense when it says `item.target.lastChild.classList is undefined` because there is no lastChild in the `<div>`

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [April 1, 2020, 3:14am UTC](https://forum.kirupa.com/t/mouseover-event-over-multiple-elements-flickers/642275/4 "2020-04-01T03:14:53Z")

</div>

You don’t want to use `item.target` inside the `if`, you want to use `listItem`. `item.target` may be the list item or it may be some element _in_ the list element and you want to work of the list element (`listItem`) itself.

---

<div class="post-metadata">

### Author: ![TheOne\_TheMany](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/theone_themany/32/11351_2.png) [@TheOne\_TheMany](https://forum.kirupa.com/u/TheOne_TheMany)
#### Post date: [April 1, 2020, 3:44am UTC](https://forum.kirupa.com/t/mouseover-event-over-multiple-elements-flickers/642275/5 "2020-04-01T03:44:28Z")

</div>

Has anyone told you that your `AMAZING`

After reading more about Traversing the DOM

> **[Traversing the DOM with JavaScript | Zell Liew](https://zellwk.com/blog/dom-traversals/)**
>
> A good JavaScript developer needs to know how to traverse the DOM—it's the act of selecting an element from another element.
> But why do we need to learn to traverse the DOM? Isn't 
> \`document.querySelector\` enough for most of our needs?
> In this...

And going back to reading what you said, it all clicked on what I was doing wrong. Since you created ` const listItem = item.target.closest('#myShoppingList li');` in the ‘mouseOver function’, I didnt need to us ‘item.target’ again in the `if `  
I just had to call `listItem` to add or remove the `class`

Here is the updated code:

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/TheOne_TheMany/r1gz4aep/10)**
>
> JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

Thank you so much @senocular