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

来源：懂视网责编：小采时间：2020-11-27 16:01:45

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

通过CSS效果：隔行变色和鼠标掠过高亮，学习JQuey的css()、hover()方法_html/css_WEB-ITnose:下面的HTML和CSS能够实现div的隔行变色: #container div{ width:200px; height:25px; font-size:14px; text-align:center; color:#474747; } .even{ background-color: #EDEDED; } .odd{ background

推荐度：

点击下载本文 文档为doc格式

导读通过CSS效果：隔行变色和鼠标掠过高亮，学习JQuey的css()、hover()方法_html/css_WEB-ITnose:下面的HTML和CSS能够实现div的隔行变色: #container div{ width:200px; height:25px; font-size:14px; text-align:center; color:#474747; } .even{ background-color: #EDEDED; } .odd{ background

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

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推荐度：

点击下载本文 文档为doc格式

标签：变色鼠标效果

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐