javascript - addeventlistener 仅在 chrome 中无法正常工作

Question

我有一个代表论坛主题的基本列表，形式为:

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

我想做的是当鼠标光标在整个<ul>上时元素，所以包含<li>同样，我将“悬停”类名称添加到 <ul> ，<ul> 后面出现一个框阴影.

我的 CSS 代码是:

.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;}

添加事件的 javascript 是:

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);

这是我的 initUI() 函数的一部分，它在 window.onload 被触发后立即启动。

问题是这在 Firefox 58.0.2 和 Opera 50.0 上运行良好，但是当我在 Chrome 64.0.3282.140 上尝试时，框阴影出现但不完全出现，仅在左侧，1/4右侧，当我移动鼠标时它会闪烁。

我还尝试了 mouseover 和 mouseout 事件。

我怀疑当我越过 <li> 时事件也会被触发元素，而不仅仅是 <ul>即使只有 <ul>添加“悬停”类的元素。

我做错了什么？

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

不知道你为什么要这样做......

为此使用 :hover 伪类:

.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>