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

最新推荐文章于 2024-01-24 16:29:20 发布

aitangyong

最新推荐文章于 2024-01-24 16:29:20 发布

阅读量2.8k

点赞数

分类专栏： jquery 文章标签：隔行变色 hover rgb和hex

本文链接：https://blog.csdn.net/aitangyong/article/details/43370295

版权

下面的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,2

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aitangyong

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
通过CSS效果：隔行变色和鼠标掠过高亮，学习JQuey的css()、hover()方法

下面的HTML和CSS能够实现div的隔行变色: #container div{ width:200px; height:25px; font-size:14px; text-align:center; color:#474747; } .even{ background-color: #EDEDED; } .odd{ ba
复制链接

扫一扫