本文主要是介绍拖动隔行变色的鼠标经过变色，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!doctype html>
<html lang="en">
<head>
<title>拖动隔行变色的鼠标经过变色</title>
<style type="text/css" media="screen">
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
.t1 {background-color:#fff;}
.t2 {background-color:#eee;}
.t3 {background-color:#ccc;}
#sample2 tr:nth-of-type(odd){ background:#00ccff;}
#sample2 tr:nth-of-type(even){ background:#ffcc00;}
*{ margin:0; padding:0;}
body{font-size:14px; padding:50px;}
.lanrenzhijia{text-align:left;}
.lanrenzhijia th{ background-image:url('images/th.png'); height:30px; background-repeat:no-repeat; color:white; text-shadow: #012b4d 2px 2px 2px; text-align: center; }
.lanrenzhijia td{text-indent:5px; padding:5px;color:#444;border-bottom:1px solid #bbb;border-left:1px solid #bbb;}
.lanrenzhijia td.left{border-left:1px solid #2e638e;}
.lanrenzhijia td.right{border-right:1px solid #2e638e;}
.lanrenzhijia td.bottom{border-bottom:1px solid #2e638e;}
.grip{width:20px;height:30px;margin-top:-3px;background-image:url('images/grip.png');margin-left:-5px;position:relative;z-index:88;cursor:e-resize;}
.grip:hover{background-position-x:-20px;}
.dragging .grip{background-position-x:-40px;}
.sampleText{position:relative;width:100%;}
.dotted{background-image:url('images/dotted.png');background-repeat:repeat-y;}
input.check{}
#sample2Txt{float:right;}
label{color:#0361ae;}
#sample2 th:nth-child(2){color:Red !important;display:none;}
#sample2 td:nth-child(2){color:Red !important;display:none;}
#sample2 th:nth-child(3){color:Red !important;display:none;}
#sample2 td:nth-child(3){color:Red !important;display:none;}
</style>
<script type="text/javascript" src="C:\Users\mcptt\Desktop\jb51\jquery-1.7.2.js"></script>
<script type="text/javascript" src="C:\Users\mcptt\Desktop\jb51\jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="C:\Users\mcptt\Desktop\jb51\colResizable-1.5.min.js"></script>
<script type="text/javascript"> $(function(){$("#sample2 tr").mousemove(function() {//$(this).css("backgroundColor", "#E6E6FA");$(this).css("fontWeight", "bolder");});$("#sample2 tr").mouseout(function() {//$(this).css("backgroundColor", "#FFFFFF");$(this).css("fontWeight", "normal");}); var onSampleResized = function(e){var columns = $(e.currentTarget).find("th");var msg = "columns widths: ";columns.each(function(){ msg += $(this).width() + "px; "; })$("#sample2Txt").html(msg); }; $("#sample2").colResizable({liveDrag:true, gripInnerHtml:"<div class='grip'></div>", draggingClass:"dragging", onResize:onSampleResized});});</script>
</head>
<body>
<body>
<!-- 代码部分begin -->
<div class="lanrenzhijia" >
<table id="sample2" width="100%" border="0" cellpadding="0" cellspacing="0"><tr><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th></tr><tr><td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td></tr><tr><td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td></tr><tr><td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td></tr><tr><td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td></tr><tr><td class="left">表格内容</td><td>表格内容</td><td>表格内容</td><td>表格内容</td><td class="right">表格内容</td></tr><tr><td class="left bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom">表格内容</td><td class="bottom right">表格内容</td></tr>
</table>
</div>
</body>
</html>这篇关于拖动隔行变色的鼠标经过变色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
