jQuery Hover Highlight Script

Share this article

Hi guys, I’ve written this jQuery script which highlights any element on the page (by changing the background colour). It’s a clever little script which will save you lots of time if you have many elements that require mouse hover events.

Features

  • Specify a background colour for hover when mouse hovers element
  • Retains background colour when mouse leaves element

Usage


$(document).ready(function() {
	/*highlight background on hover*/
	$('.displayItem').hoverHighlight('#E0E0E0'); 
}); 

Demo

The following divs have been given class=”displayItem” and hover with an orange background.

Transparent backgrounds (only in FireFox)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu nulla leo. Proin ligula nunc, lacinia pellentesque bibendum ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu nulla leo. Proin ligula nunc, lacinia pellentesque bibendum ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu nulla leo. Proin ligula nunc, lacinia pellentesque bibendum ac.

Coloured backgrounds (all browsers)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu nulla leo. Proin ligula nunc, lacinia pellentesque bibendum ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu nulla leo. Proin ligula nunc, lacinia pellentesque bibendum ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu nulla leo. Proin ligula nunc, lacinia pellentesque bibendum ac.

jQuery.hoverHighlight()

I’ve tested the script on the different browsers and fixed IE6 & IE7 bug (they don’t support the jQuery.data method so I’ve coded in a default value for those browsers that don’t support it). So now it works on all browsers.

You’ll also need this script to convert the colours from RGB to Hex.

/*
 *	Create Hover Backgound Highlight for any element. 
 *	Retains original background-color.
 */
$.fn.extend({
	hoverHighlight: function (colour) 
	{
		$(this).live('mouseenter', function() 
		{
			/*save original background colour*/
			if ($(this).css('background-color') && $(this).css('background-color') !== 'transparent')
			{
				$(this).data('bgColour',rgb2hex($(this).css('background-color')));
			}
			else {
				$(this).data('bgColour','transparent');
			}
			$(this).css('background-color',colour);
		}).live('mouseleave', function() 
		{ 
			var defaultBg = 'transparent';
			var changeBg = ($(this).data('bgColour') !== null) ? $(this).data('bgColour') : defaultBg;
			$(this).css('background-color',changeBg);
		});
		return this; /*enable jQuery chaining*/
	}
});

Full Code For Demo Above


(function($) 
{
	$.fn.extend({
		hoverHighlight: function (colour) 
		{
			$(this).live('mouseenter', function() 
			{
				/*save original background colour*/
				if ($(this).css('background-color') && $(this).css('background-color') !== 'transparent')
				{
					$(this).data('bgColour',rgb2hex($(this).css('background-color')));
				}
				else {
					$(this).data('bgColour','transparent');
				}
				$(this).css('background-color',colour);
			}).live('mouseleave', function() 
			{ 
				var defaultBg = 'transparent';
				var changeBg = ($(this).data('bgColour') !== null) ? $(this).data('bgColour') : defaultBg;
				$(this).css('background-color',changeBg);
			});
			return this; /*enable jQuery chaining*/
		}
	});

	function rgb2hex(rgb)
	{
		 rgb =  rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
		  return "#" +
		  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
		  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
		  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
	}

	$(document).ready(function() 
	{
		/* Transparent backgrounds */
		/* highlight background grey on hover */
		$('.displayItem1').hoverHighlight('#C1BDBD'); 
		/* highlight background red on hover */
		$('.displayItem2').hoverHighlight('#F40E0E'); 
		/* highlight background orange on hover */
		$('.displayItem3').hoverHighlight('#FFB200');
		
		/* Coloured backgrounds */
		/* highlight background pink on hover */
		$('.displayItem4').hoverHighlight('#EF9BE0'); 
		/* highlight background yellow on hover */
		$('.displayItem5').hoverHighlight('#FCEB00'); 
		/* highlight background green on hover */
		$('.displayItem6').hoverHighlight('#1DE020');
	}); 

})(jQuery);
Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form