Learn YUI3: Mouseover, Mouseout, Mouseenter and Mouseleave events with Examples

These events (Mouseover, Mouseout, Mouseenter and Mouseleave) requires two modules:
1. event-hover module -
Adds a "hover" event which binds to two callbacks, one for the start, and one for the end of a mouse hover.

2. event-mouseenter module -
Adds "mouseenter" and "mouseleave" events.

Mouseenter and mouseleave is similar to mouseover and mouseout but it does not bubble. and in many cases we need this instead of mouseover and mouseout. But these two events (mouseenter and mouseleave) is an idea of Microsoft. Firefox and Chrome has not supported it even after it became a part of CSS specs. YUI has included it in normalized way.

First link is an example of mouseover and mouseout. Second link is an example of mouseenter and mouseleave.


<a rel="me" href="http://newsviews.satya-weblog.com/">My general blog</a>
<a  href="http://www.satya-weblog.com/">Tech blog</a>

YUI().use('node', 'event-hover', function(Y) { /* Code here */ });

Mouseover and mouseout event example


function overFn(e) {
		e.target.setStyle('color', '#008A00');
		//e.stopPropagation();
	}
	function outFn(e) {
		e.target.setStyles({'color': 'maroon', 'fontSize':'1.5em', 'fontWeight':'bold'});
	}
	// to Log output in an output DIV
	function log(data) {
		Y.one('#log').append(data + '<br/>');
	}
	// Access rel containing 'me' link
	Y.one('a[rel~=me]').on('hover', overFn, outFn);

MouseEnter and MouseLeave Example:
YUI().use('event-mouseenter', 'selector-css3', function (Y) { /* Code here */ });


		Y.all('a:not(a[rel*=me])').on('mouseenter', mouseEnter);
		Y.all('a:not(a[rel*=me])').on('mouseleave', mouseLeave);
		var fontSize;
		function mouseEnter(e) {
			fontSize = e.target.getStyle('fontSize');
			e.target.setStyles({'fontSize':'1.5em'});
			logit('Font Size now: ' + e.target.getStyle('fontSize'));
		}
		function mouseLeave(e) {
			e.target.setStyles({'fontSize':fontSize});
			logit('Font Size now: ' + fontSize);
		}

Default selector for YUI3 is CSS 2.1. For CSS 3 selector to use in YUI3, use "selector-css3" module in YUI.
Working example and demo of Mouseover, mouseout, mouseenter and mouseleave.