<!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=utf-8" />
<title>隔行换色及其鼠标划过变色</title>
<script language="" src="jquery-1.2.6.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
$(document).ready(function(){ //ready加载
$(".ul2 li").mouseover(function(){
//如果鼠标移到class为ul2的li上时，执行函数
$(this).addClass("over");})
$(".ul2 li").mouseout(function(){
//给这行添加class值为over，并且当鼠标一出该行时执行函数
$(this).removeClass("over");}) //移除该行的class
$(".ul2 li:even").addClass("alt");
//给class为ul2的li的偶数行添加class值为alt
});
</script>
<style>
body{font-size:12px;}
h4,li{height:30px;line-height:30px; padding-left:10px; color:#333; background:#bcd4ec;width:1000px; list-style-type:none; border:1px solid #f90}
h4{ background:#f80}
li.alt {background:#fff;}/*这行将给所有的li加上背景色*/
li.over {border:1px solid #f30;color:#f00} /*这个将是鼠标高亮行的背景色*/
</style>
</head>
<body>
<h4>以下是测试内容</h4>
<ul class="ul2">
<li>测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一</li>
<li>测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二</li>
<li>测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一</li>
<li>测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二</li>
<li>测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一</li>
<li>测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二</li>
<li>测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一</li>
<li>测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二</li>
<li>测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一</li>
<li>测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二</li>
<li>测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一</li>
<li>测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二</li>
<li>测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一</li>
<li>测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二</li>
<li>测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一</li>
<li>测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二</li>
<li>测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一测试一</li>
<li>测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二测试二</li>
</ul>
</body>
</html>
posted on
