好吧，无聊发点以前的代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>前端技巧</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body, ul { margin: 0; padding: 0; font-size: 12px; color: #333; }
a { color: #333; text-decoration: none; display: block; }
.container { width: 600px; margin: 0 auto; }
.row { display: table; margin: 0; padding: 0; }
ul.list { display: block; }
ul.list li { list-style-type: none; height: 30px; line-height: 30px; background-color: #f9f7f8; }
ul.list li a { padding-left: 10px; }
ul.list li.current a { background-color: #e2e2e2; padding-left: 10px; }
ul.list li.cur a { background-color: #333; color: #fff; padding-left: 10px; }
.btn { display: block; padding: 10px 18px; background-color: #186574; width: 80px; color: #fff; }
.btn:hover { background-color: #19839a; }
</style>
<script>
$(function () {
$(".list li").mouseover(function () {
$(this).addClass("cur");
}).mouseout(function () {
$(this).removeClass("cur");
})
$(".list li:even").addClass("current");
});
</script>
</head>
<body>
<div class="container">
<h1>效果一</h1>
<ul class="list">
<li><a target="_blank" href="http://www.kuaipao8.com/">web技术分享</a></li>
<li><a target="_blank" href="http://www.kuaipao8.com/">web技术分享</a></li>
<li><a target="_blank" href="http://www.kuaipao8.com/">web技术分享</a></li>
<li><a target="_blank" href="http://www.kuaipao8.com/">web技术分享</a></li>
<li><a target="_blank" href="http://www.kuaipao8.com/">web技术分享</a></li>
<li><a target="_blank" href="http://www.kuaipao8.com/">web技术分享</a></li>
<li><a target="_blank" href="http://www.kuaipao8.com/">web技术分享</a></li>
</ul>
</div>
</body>
</html>
声明: 本文由( zongyan86 )原创编译，转载请保留链接: jquery 隔行变色
- 上一篇：EasyUI 回车触发查询按钮及弹出框保存按钮
- 下一篇：锋利的jQuery
