大家好,我编写了这个jQuery脚本,该脚本突出显示了页面上的任何元素(通过更改背景色)。 这是一个聪明的小脚本,如果您有许多需要鼠标悬停事件的元素,它将节省大量时间。
特征
- 当鼠标悬停元素时,指定悬停的背景颜色
- 鼠标离开元素时保留背景颜色
用法
演示版
下列div被赋予class =“ displayItem”并悬停在橙色背景上。
透明背景(仅在FireFox中)
Lorem ipsum dolor坐下来,一直保持着良好的状态。
Nunc eu nulla leo。
齿状韧带原状,紫胶蝶形双歧本ac。
Lorem ipsum dolor坐下来,一直保持着良好的状态。
Nunc eu nulla leo。
齿状韧带原状,紫胶蝶形双歧本ac。
Lorem ipsum dolor坐下来,一直保持着良好的状态。
Nunc eu nulla leo。
齿状韧带原状,紫胶蝶形双歧本ac。
彩色背景(所有浏览器)
Lorem ipsum dolor坐下来,一直保持着良好的状态。
Nunc eu nulla leo。
齿状韧带原状,紫胶蝶形双歧本ac。
Lorem ipsum dolor坐下来,一直保持着良好的状态。
Nunc eu nulla leo。
齿状韧带原状,紫胶蝶形双歧本ac。
Lorem ipsum dolor坐下来,一直保持着良好的状态。
Nunc eu nulla leo。
齿状韧带原状,紫胶蝶形双歧本ac。
jQuery.hoverHighlight()
我已经在不同的浏览器上测试了该脚本,并修复了IE6和IE7错误(它们不支持jQuery.data方法,所以我为不支持该浏览器的浏览器设置了默认值)。 因此,现在它适用于所有浏览器。
您还需要此脚本将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*/
}
});
上面演示的完整代码
From: https://www.sitepoint.com/jquery-hover-highlight-script/