javascript – 鼠标在Chrome中输入行为不端

2023年12月22日 146次阅读

我有这个on-mouse-enter触发器代码(用于监听鼠标输入的
JavaScript和用于转换的CSS),最近,它在Chrome中表现得很有趣;在v 44.0.2403.157m上测试,控制台没有任何错误.通过表现得好笑,我的意思是淡入效果有时会跳过.

var shown = true;
var parent = document.querySelector('.parent');
var child = document.querySelector('.child');

parent.addEventListener('mouseenter', function(){
  child.style.opacity = shown ? 0 : 1;
  shown = !shown;
});
* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100%;
  margin: 10px auto;
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  transition: opacity 0.5s linear;
}


p {
  padding: 1em;
}
<div class="parent">
<img src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" alt="" width="500px" height="auto" />

<div class="child">
<img src="http://maui.hawaii.edu/tlc/wp-content/uploads/sites/53/2013/11/testing.jpg" alt="" width="500px" height="auto" />
</div>
</div>

代码应该像我们在this示例中那样工作.
我非常感谢您拥有代码替代方案和想法.
谢谢

最佳答案 我做了一些研究,有关于这个问题的多个报告,如
here或
here.Your代码在我的Firefox(38.0.5)和Edge(20.10240.16384.0)中都能正常工作.我认为这个问题是由Chrome考虑你的代码写得很好.

点赞