addeventlistener not working properly only in chrome

Question

I have a basic list representing thread on a forum in the form of :

<ul class="thread-list">
    <li>...</li>
    <li>...</li>
    ...
</ul>

what I want to do is when the mouse cursor is on the entire <ul> element, so on the contained <li> too, I add the "hover" class name to the <ul> , and a box-shadow appear behind the <ul> .

My css code is that :

.thread-list{-webkit-transition: box-shadow 0.5s;transition: box-shadow 0.5s;}
.thread-list.hover{-webkit-box-shadow: 0px 2px 5px #333;box-shadow: 0px 2px 5px #333;}

and the javascript adding the event is :

var ul = document.getElementsByClassName('thread-list')[0];                                                   
ul.addEventListener("mouseenter", function(e){
        hover = 1;
        this.classList.add('hover');
}, false);
ul.addEventListener("mouseleave", function(e){
        hover = 0;
        this.classList.remove('hover');
}, false);

this is part of my initUI() function that is launched right after window.onload is fired.

The problem is that this is working great on Firefox 58.0.2 and Opera 50.0, but when I try on Chrome 64.0.3282.140, the box-shadow appears but not entirely, just on the left side, and 1/4 of the right side, and this is blinking when I move the mouse.

I also tried mouseover and mouseout events.

I suspect the fact that the event is also fired when I pass over a <li> element and not only the <ul> even if there is only the <ul> element that gets the 'hover' class added.

What am I doing wrong ?

 var ul = document.getElementsByClassName('thread-list')[0]; ul.addEventListener("mouseenter", function(e) { hover = 1; this.classList.add('hover'); }, false); ul.addEventListener("mouseleave", function(e) { hover = 0; this.classList.remove('hover'); }, false); 

 .thread-list { -webkit-transition: box-shadow 0.5s; transition: box-shadow 0.5s; } .thread-list.hover { -webkit-box-shadow: 0px 2px 5px #333; box-shadow: 0px 2px 5px #333; } 

 <ul class="thread-list"> <li>...</li> <li>...</li> ... </ul> 

Answer 1

Don't know why you're doing this ...

Use the :hover pseudo-class for that :

 .thread-list{-webkit-transition: box-shadow 0.5s;transition: box-shadow 0.5s;} .thread-list:hover{-webkit-box-shadow: 0px 2px 5px #333;box-shadow: 0px 2px 5px #333;} 

 <ul class="thread-list"> <li>...</li> <li>...</li> ... </ul>