jQuery hover highlight and mouseover jQuery

jQuery mouseover hover highlight css

Hover effect with jQuery.

The same effects can be achieved with pure CSS as well, however jQuery can do real magick and simplify things.
jQuery can be used for IE6 hover effect instead of ie6-hover.htc
jQuery can be used when mouse hover area and highlight area aren't the same.
jQuery can be used to switch on / off whatever.

Sample 1. jQuery hover highlight.

Hover here for highlight effect Highlight-One Highlight-Two

jQuery hover highlight HTML mark up and jQuery.

<p id="largeArea">
	Hover here for highlight effect
	<span id="smallAreaOne">Highlight-One</span>
	<span id="smallAreaTwo">Highlight-Two</span>
</p>

<script type="text/javascript">
	$(function(){
		$('#largeArea,#smallAreaOne,#smallAreaTwo').mouseover(function(){
			$('#smallAreaOne').css('color','#f00');
			$('#smallAreaTwo').css('color','#00f');
		}).mouseout(function(){
			$('#smallAreaOne,#smallAreaTwo').css('color','#444');
		});
	});
</script>

Sample 2. Mouseover jQuery.

mySwitchOne, mouseover here for highlight effects jQuery

Object A

Object B

mySwitchTwo, mouseover here for jQuery highlight effects

HTML mark up, CSS and jQuery to Mouseover jQuery.

<p id="mySwitchOne">mySwitchOne, mouseover here for highlight effects jQuery</p>
<p id="objectA">Object A</p>
<p id="objectB">Object B</p>
<p id="mySwitchTwo">mySwitchTwo, mouseover here for jQuery highlight effects</p>

.makeChange{
	color:#f00;
}
#objectB.makeChange{
	color:#00f;
}

<script type="text/javascript">
	$(function(){
		$('#mySwitchOne,#mySwitchTwo').bind('mouseover mouseout',function(){
			$('#objectA,#objectB').toggleClass('makeChange');
		});
	});
</script>

2011