效果: 代码: <! 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 > jquery </ title > < script type ="text/javascript" src ="jquery.js" ></ script > </ head > < body > < script type ="text/javascript" > $(document).ready(function(){ //jQuery ready is quicker than onload $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}); $(".stripeMe tr:even").addClass("alt");}); </ script > < style type ="text/css" > table.sample {}{ border-collapse: collapse; width: 50%; margin: 24px; font-size: 1.1em;}table.sample th {}{ background: #3e83c9; color: #fff; font-weight: bold; padding: 2px 11px; text-align: left; border-right: 1px solid #fff; line-height: 1.2;}table.sample td {}{ padding: 6px 11px; border-bottom: 1px solid #95bce2; vertical-align: top;}table.sample td * {}{ padding: 6px 11px;}table.sample tr.alt td {}{ background: #ecf6fc;}table.sample tr.over td {}{ background: #bcd4ec;} </ style > < table class ="stripeMe sample" > < thead > < tr > < th > Lorem </ th > < th > Ipsum </ th > < th > Dolor </ th > < th > Sit </ th > < th > Amet </ th > </ tr > </ thead > < tbody > < tr > < td > Lorem </ td > < td > Ipsum </ td > < td > Dolor </ td > < td > Sit </ td > < td > Amet </ td > </ tr > < tr > < td > Lorem </ td > < td > Ipsum </ td > < td > Dolor </ td > < td > Sit </ td > < td > Amet </ td > </ tr > < tr > < td > Lorem </ td > < td > Ipsum </ td > < td > Dolor </ td > < td > Sit </ td > < td > Amet </ td > </ tr > < tr > < td > Lorem </ td > < td > Ipsum </ td > < td > Dolor </ td > < td > Sit </ td > < td > Amet </ td > </ tr > < tr > < td > Lorem </ td > < td > Ipsum </ td > < td > Dolor </ td > < td > Sit </ td > < td > Amet </ td > </ tr > < tr > < td > Lorem </ td > < td > Ipsum </ td > < td > Dolor </ td > < td > Sit </ td > < td > Amet </ td > </ tr > < tr > < td > Lorem </ td > < td > Ipsum </ td > < td > Dolor </ td > < td > Sit </ td > < td > Amet </ td > </ tr > < tr > < td > Lorem </ td > < td > Ipsum </ td > < td > Dolor </ td > < td > Sit </ td > < td > Amet </ td > </ tr > < tr > < td > Lorem </ td > < td > Ipsum </ td > < td > Dolor </ td > < td > Sit </ td > < td > Amet </ td > </ tr > < tr > < td > Lorem </ td > < td > Ipsum </ td > < td > Dolor </ td > < td > Sit </ td > < td > Amet </ td > </ tr > </ tbody > </ table > </ body > </ html > 最近在支付宝UED读到一个比较有启示的文章,增补上来:符合WEB标准的表格行滑过高亮效果 转载于:https://www.cnblogs.com/color-fever/archive/2008/10/13/1310211.html