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

WBOY
Freigeben: 2016-06-24 11:49:47
Original
1347 Leute haben es durchsucht

下面的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>
Nach dem Login kopieren


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

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

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


可以看到使用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]);}
Nach dem Login kopieren

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage