通过CSS效果：隔行变色和鼠标掠过高亮，学习JQuey的css()、hover()方法

浏览数：36 / 时间：2015年06月09日

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

<head>
	<style>
		#container div{
			width:200px;
			height:25px;
			font-size:14px;
			text-align:center;
			color:#474747;
		}

		.even{
			background-color: #EDEDED;
		}

		.odd{
			background-color: #FAFAFA;
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="even">1</div>
		<div class="odd">2</div>
	</div>
</body>

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

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]);
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

通过CSS效果：隔行变色和鼠标掠过高亮，学习JQuey的css()、hover()方法