jQuery 隔行换色鼠标滑动单行变色代码

发布时间：2018-08-17 15:36:05 所属栏目：编程来源：站长网

导读：基于 jQuery 技能的隔行换色结果，样式较量粗拙，没有太多美化。结果：鼠标颠末每一行的时辰，行的配景会改变，这样会使你的列表布局更清淅，用户体验晋升。请各人留意，第一次运行也许提醒有错误，以是请点击网页演示或运行演示后，革新一下网页再运行

　　基于jQuery技能的隔行换色结果，样式较量粗拙，没有太多美化。

　　结果：鼠标颠末每一行的时辰，行的配景会改变，这样会使你的列表布局更清淅，用户体验晋升。

　　请各人留意，第一次运行也许提醒有错误，以是请点击“网页演示”或运行演示后，革新一下网页再运行一次就正常了。

　　网页演示：点击这里

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gbk" /> <title>jQuery 隔行换色鼠标颠末变革 - Liehuo.Net</title> <script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script> <style> /* 隔行换色 */ body{font-size:9pt;} li{padding:3px;} .demoOver{background:#ccc;} .demoBg{background:#f1f1f1;} </style> </head> <body> <script type="text/javascript"> // 隔行换色 $(function(){ $(".demo ul li").mouseover(function(){ $(this).addClass("demoOver"); }).mouseout(function(){ $(this).removeClass("demoOver"); }) $(".demo ul li:even").addClass("demoBg"); }) </script>  请各人留意，第一次运行也许提醒有错误，请革新一下网页再运行一次就正常了。 <div class="demo"> <ul> <li><a href="#" title="苍井空将出席久游宣布会,AV女伶转战中国网游">苍井空将出席久游宣布会,AV女伶转战中</a></li> <li><a href="http://www.veryhuo.com/a/view/17226.html" title="有动静称富士康从六月开始涨人为50-100元">有动静称富士康从六月开始涨人为50-100</a></li> <li><a href="http://www.veryhuo.com/a/view/17313.html" title="富士康第13跳消息传出,港媒称女员工正在急救">富士康第13跳消息传出,港媒称女员工正</a></li> <li><a href="#" title="谷姐、iPed平板电脑登中国九大盗窟产物榜单">谷姐、iPed平板电脑登中国九大盗窟产物</a></li> <li><a href="http://www.veryhuo.com/a/view/17891.html" title="谷歌LOGO眷念丹尼斯·伽伯(Dennis Gabor)诞辰">谷歌LOGO眷念丹尼斯·伽伯(Dennis Gabo</a></li> <li><a href="#" title="Debrahlee Lorenzana 过于性感被花旗银行解雇">Debrahlee Lorenzana 过于性感被花旗银</a></li> <li><a href="http://www.veryhuo.com/a/view/17650.html" title="富士棵魅涨人为20%,传苹果也许将提供津贴">富士棵魅涨人为20%,传苹果也许将提供津贴</a></li> <li><a href="http://www.veryhuo.com/a/view/20176.html" title="Tuan.qq.com今天上线腾讯正式进入<b>团购</b>市场">Tuan.qq.com今天上线腾讯正式进入团购</a></li> <li><a href="#" title="黛玉裸死!? 网友：是＂震撼＂照旧扯淡?">黛玉裸死!? 网友：是＂震撼＂照旧扯淡?</a></li> <li><a href="http://www.veryhuo.com/a/view/18774.html" title="SIM卡剪卡器贩卖火热,只因苹果宣布iPhone 4?">SIM卡剪卡器贩卖火热,只因苹果宣布iPho</a></li> </ul> </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys

jQuery 隔行换色 鼠标滑动单行变色代码

jQuery 隔行换色鼠标滑动单行变色代码