jquery hover_jQuery Hover高亮脚本

最新推荐文章于 2024-09-26 01:42:12 发布

dingshi7798

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量85

点赞数

文章标签： javascript html js jquery python ViewUI

原文链接：https://www.sitepoint.com/jquery-hover-highlight-script/

版权

jquery hover

嗨，大家好，我已经编写了这个jQuery脚本，该脚本突出显示了页面上的任何元素（通过更改背景颜色）。这是一个聪明的小脚本，如果您有许多需要鼠标悬停事件的元素，它将节省大量时间。

特征

当鼠标悬停元素时，指定悬停的背景颜色
鼠标离开元素时保留背景色

用法

演示版

下列div被赋予class =“ displayItem”并悬停在橙色背景上。

透明背景（仅在FireFox中）

Lorem ipsum dolor坐下，一直保持良好状态。 Nunc eu nulla leo。齿状韧带原状，紫胶盘状双歧杆菌ac。

彩色背景（所有浏览器）

Lorem ipsum dolor坐下，一直保持良好状态。 Nunc eu nulla leo。齿状韧带原状，紫胶盘状双歧杆菌ac。

jQuery.hoverHighlight（）

我已经在不同的浏览器上测试了该脚本，并修复了IE6和IE7错误（它们不支持jQuery.data方法，因此我为那些不支持jQuery的浏览器使用了默认值）。因此，现在它适用于所有浏览器。

您还需要此脚本将RGB的颜色转换为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*/
	}
});