onmouseover（）的JavaScript转换不会在onmouseout（）事件中转换回我想要的方式

Question

I have some photos on my website and I'm trying to put the JS equivalent of a CSS :hover effect on the captions with a .25s transition.

You can see in the code below I'm doing this with onmouseover() and onmouseout() events in the HTML and then writing a transition function in the JS. Pretty basic stuff. Everything works almost like it should. The caption transitions in when I put my mouse on the photo, and transitions out when I mouse off.

HOWEVER , if I just fly my mouse over the photo very quickly, sometimes the caption will come in and stay there until I mouse over it again. That doesn't happen every time. I'm no expert in machine mechanics and order of operations, but it almost seems to me as if, when I do that, the onmouseover() and onmouseout() events overlap and the "winner" is what executes.

I was wondering if there's any certain way to make sure that when I flick my mouse over very quickly, the caption either doesn't show up or goes away every time instead of transitioning in and staying there. Is it a simple matter of putting a delay on one of the transitions? Or is there some way I can prioritize one function if they both try to execute simultaneously?

The site isn't live yet so I can't link you to it, but here's the code for one of the photos and the JS for the events. I didn't put the CSS in there so I think the <div> might be bigger than the picture, but run the code and flick your mouse over the image from right to left so you get off the <div> and see if it happens for you!

  function divMouseOver(num){ var elementX = document.getElementById("photo" + num + "Subtitle"); var elementZ = document.getElementById("photo" + num + "Text"); var opac = 0; var id = setInterval(frame, 10); function frame(){ if(opac < 1.0){ opac = opac + 0.04; elementX.style.opacity = '0' + opac; elementZ.style.opacity = '0' + opac; } else{ clearInterval(id); } } } function divMouseOut(num){ var elementX = document.getElementById("photo" + num + "Subtitle"); var elementZ = document.getElementById("photo" + num + "Text"); var opac = 1.0; var id = setInterval(frame, 10); function frame(){ if(elementX.style.opacity > 0.0){ opac = opac - 0.04; elementX.style.opacity = '0' + opac; elementZ.style.opacity = '0' + opac; if(elementX.style.opacity == 0.04){ elementX.style.opacity = 0.0; elementZ.style.opacity = 0.0; } } else{ clearInterval(id); } } } 

  <div class="sectionPhotos"> <div class="container-fluid"> <div id="photoRow" class="row"> <div class="row1Photo" onmouseover="divMouseOver(1)" onmouseout="divMouseOut(1)"> <img style ="width:160px;height:100px;"src="https://cdn.wallpapersafari.com/26/0/VTGXtw.jpg"/> <div id="photo1Subtitle" class="row1PhotoSubtitle"> <h5>PHOTO SUBTITLE:</h5> </div> <div id="photo1Text" class="row1PhotoText"> <h4 class="pageLinkHere">PAGE LINK ON PHOTO</h4> </div> </div> </div> </div> </div> 

Answer 1

Yes, this happens to other people in their browsers. Article about this behaviour and how mitigate what you experience: https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave

TL;DR mouse movement is too fast and browser checks for mouse position only time to time, better go for onmouseleave event