当前位置:Gxlcms > html代码 > 通过CSS效果:隔行变色和鼠标掠过高亮,学习JQuey的css()、hover()方法_html/css_WEB-ITnose

通过CSS效果:隔行变色和鼠标掠过高亮,学习JQuey的css()、hover()方法_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:48人阅读

下面的HTML和CSS能够实现div的隔行变色:

		
1
2


如果要实现效果:鼠标移到某一行上,改变背景和文字颜色;鼠标移除,还原以前的背景和文字颜色。

JQuery代码可以实现这个效果:

$("#container div").hover(function(){		// 鼠标经过时,改变背景色和文字颜色		$(this).css("backgroundColor","#346ba3");		$(this).css("color","rgb(255,255,255)");	},function(){		// 鼠标移除,还原背景色和文字颜色 		$(this).css("backgroundColor","");		$(this).css("color","");});


可以看到使用JQuery非常的简单:

1、提供了hover()这个API,接收2个函数,对应mouseover和mouseout。

2、将背景和文字颜色置空,即可还原元素在mouseover之前的颜色,非常棒。

3、支持rgb格式和十六进制格式的颜色值,免去了我们需要做颜色转换的麻烦。

所以这篇博客中提到的RGB转HEX格式,没有什么实际的用处,不过这个算法写的还是很好的,在此记录下:

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

人气教程排行