Question

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

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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

Answer 1

我做了一些研究，并且有关于此问题的多个报告，例如here或here。您的代码在Firefox（38.0.5）和Edge（20.10240.16384.0）中按预期工作。我认为这个问题是由Chrome引起的，考虑到您的代码写得很好。

鼠标在Chrome中输入行为不端

1 个答案: