js隔行变色、鼠标划过变色代码

隔行变色、鼠标划过变色代码，已经有不少类似的代码了，出于学习的态度，再发一个，因为每个隔行换色的写法不同。

<!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> <title>隔行变色且鼠标划过变色的效果</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css"> .container ul{margin:0;padding:0;} .container li{cursor:pointer;height:30px;width:200px;background-color:#FFC;line-height:30px;text-indent:1em;font-size:12px;} .container .change{cursor:pointer;height:30px;width:200px;background-color:#C1F9CC;line-height:30px;text-indent:1em;font-size:12px;} .container .current{cursor:pointer;height:30px;width:200px;background-color:#F66;line-height:30px;text-indent:1em;font-size:12px;} </style></head><body> <span>第一个UL</span><div class="container"> <ul id="content"> <li>隔行变色，划过变色</li><li>隔行变色，划过变色</li><li>隔行变色，划过变色</li><li>隔行变色，划过变色</li><li>隔行变色，划过变色</li></ul></div><span>第二个UL</span><div class="container"> <ul id="content2"> <li>隔行变色，划过变色</li><li>隔行变色，划过变色</li><li>隔行变色，划过变色</li><li>隔行变色，划过变色</li><li>隔行变色，划过变色</li></ul></div><span>第三个UL</span><div class="container"> <ul id="content3"> <li>隔行变色，划过变色</li><li>隔行变色，划过变色</li><li>隔行变色，划过变色</li><li>隔行变色，划过变色</li><li>隔行变色，划过变色</li></ul></div></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

以上就是js隔行变色、鼠标划过变色代码的详细内容，更多请关注0133技术站其它相关文章！