CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
typo_
typo_

Reputation: 21

on mouse enter misbehaving in Chrome

I have this on-mouse-enter trigger code (JavaScript to listen for mouse enters and CSS for transitions) and lately, it's been acting funny in Chrome; tested on v 44.0.2403.157m without any error in the console. By acting funny, I mean that fade in-out effect sometimes is skipping. 

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>

The code should work like we have in this example. I would greatly appreciate to have your code alternatives and thoughts. Thanks

Upvotes: 4

Views: 172

Answers (1)

Jay Sky
Jay Sky

Reputation: 143

I did some research and there are multiple reports about this issue like here or here.Your code works as expected for me in both Firefox(38.0.5) and Edge(20.10240.16384.0).I assume this problem is caused by Chrome considering your code is written well.

Upvotes: 2

Related Questions