Should: hover and mouseout have the same triggering reasons?
When I programmed the aspx site I ran into the problem that a div that had a couple of elements and was displayed on top of other elements (due to position: fixed) remained invisible despite my desires otherwise.
This div should have been invisible if the mouse left the area it was contained in. As easy to think, I used:
<div id="xyz" onmouseout="JavaScript: $('#xyz').hide();">....</div>
this is triggered when I have left the padding area that was defined for the div and entered the elements, or the space between the elements (elements inside the div), .....
Now that I used css instead to do hide:
#xyz.HideOnNotHovered { display: none; }
#xyz.HideOnNotHovered:hover { display: inline-block; }
This worked as intended. So Regardles, where my mouse was inside the div, it was only visible when it left the div, the div disappeared.
This situation (which I was unable to recreate in jsfiddle thanks to a complex layer of css and javascripts that I could not add there) was asked by the question:
When I first thought about the problem, I thought that the onmouseout event and the final: hover procedures are essentially the same (or that onmouseover and: hover are the same and that onmouseout is only called when: hover ends and only under the same circumstances). So my question is, is there / is there a difference between onmouseout and the opposite: hover?
source to share
This is the same difference between jQuery events mouseout
and mouseleave
:
-
mouseleave
fires only when the cursor leaves the target element - example -
mouseout
runs every time the cursor leaves the target element AND casts a child element - example
This is the same behavior for :hover
(css) and onmouseout
in javascript:
-
:hover
applies when the cursor is within the target element - example -
onmouseout
runs every time the cursor leaves the target element AND casts a child element - example
Here's a good referral about these two different behaviors
source to share