我有一个代表论坛主题的基本列表,形式为:
<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>
最佳答案
不知道你为什么要这样做......
为此使用 :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>
关于javascript - addeventlistener 仅在 chrome 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48707822/