In jquery mouse events, “.mouseover” and “.mouseleave” can be accomplished equivalently by setting up the CSS “:hover” property.

However, this site involves using one element detects the mouse event, while another element is displaying the effect when the event is detected. This prevents the usage of pure CSS because it’s lack of logical operations. Therefore I achieved this in jquery by applying show and fade effects on on element and “.mouseover” and “.mouseleave” event on another, which allows separation of detection and effect displaying.

However, there is another event – “.mouseenter” in addition to “.mouseover”.
Using “.mouseover” will cause unpredictable latency in detection of the mouse leaving the object while using “.mouseenter” resolves that.

I speculate jquery rewrote the “.mouseenter” and “.mouseleave” events on top of the original javascript’s API, and used original javascript’s “.mouseover” event as-is, which caused the two methods’ event detection mechanisms to differ and lead to inconsistent results.