Javascript OnMouseEnter代码替代方案

我有这段代码片段，最初是由（特别感谢）编写的，但最近解决方案在Chrome中出现混乱（淡入淡出效果有时会跳过）-在v45.0.2454.99 m（64位）和v45.0.2454.85 m（64位）、Win7 64位中进行了测试

var显示=true；
var parent=document.querySelector（'.parent'）；
var child=document.querySelector（'.child'）；
parent.addEventListener（'mouseenter'，function（）{
child.style.opacity=显示？0:1；
显示=！显示；
});
*{
保证金：0；
填充：0；
}
.家长{
宽度：100%；
利润率：10px自动；
位置：相对位置；
}
.孩子{
位置：绝对位置；
排名：0；
宽度：100%；
身高：100%；
显示：块；
溢出：隐藏；
过渡：不透明度0.5s线性；
}
p{
填充：1em；
}

MouseCenter上的事件可能就是问题所在。当您使用嵌套DOM时，触发此事件的次数比您想象的要多。有一个很好的writeup，但快速的解决方案是尝试在MouseOver上使用
。
使用jQuery只需使用
fadeToggle（）


$（'.parent'）.mouseenter（函数（）{
$（'.child'）.fadeToggle（）；
});
*{
保证金：0；
填充：0；
}
.家长{
宽度：100%；
利润率：10px自动；
位置：相对位置；
}
.孩子{
位置：绝对位置；
排名：0；
宽度：100%；
身高：100%；
显示：块；
溢出：隐藏；
}
p{
填充：1em；
}

感谢您的解决方案，目前我无法使用上述最新版本的Chrome进行测试，但我会回来告诉您最新消息。顺便说一句，有点离题了，你知道为什么只有当鼠标从下到上或从上到下而不是从右到左（全屏）进入时，
mouseenter
才有效吗？tks@typo_78因为
.parent
的宽度为
100%
覆盖整个屏幕。而不是图片本身的宽度。休斯顿，一切看起来都很好：）谢谢，在Chrome 45.0.2454.99 m（64位）win7 64位中测试