您的位置：首页 > Web前端 > HTML

HTML一种鼠标移动列变色效果

2010-02-24 18:35 399 查看
<!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=gb2312" />
<title></title>
<style>
*{font-size:12px; list-style:none; padding:0; margin:0}
.TmpMouseOver{padding:5px;border:1px solid #dddddd;border-top:1px solid #000000;float:left;width:780px; margin-top:-1px}
.MouseOut{padding:5px;border:1px solid #dddddd;float:left;width:780px; margin-top:-1px}
.CurMouseOver{padding:5px;background-color:#CCCCCC;border:1px solid #000000;float:left;width:780px; margin-top:-1px}

.TableListBox{clear:both;padding:0 15px}
.letter{width:756px;text-align:left;border-left:1px solid #CDCDCD;border-right:1px solid #CDCDCD}

.letter .Tmphd{height:32px;line-height:32px;border:1px solid #CDCDCD;border-top:1px solid #E60014;float:left;margin-top:-1px;width:780px;}
.letter .hd{height:32px;line-height:32px;border:1px solid #CDCDCD;float:left;margin-top:-1px;width:780px;}
.letter .Curhd{height:32px;line-height:32px;background-color:#fbbe63;border:1px solid #E60014;float:left;margin-top:-1px;width:780px;}

.letter .hd2{line-height:32px;border:1px solid #CDCDCD;float:left;height:32px;width:780px;}

.i6,.i4,.i3,.i5,.i7,.i8{float:left;height:32px;line-height:32px}
.i1{width:14px;float:left;padding-left:10px;padding-right:10px;margin-top:9px;line-height:0px}
.i2{width:14px;float:left;padding-left:10px;padding-right:10px;margin-top:7px;line-height:0px}
.i2 img{ height:16px;border:0 none;}
.i6{float:left;padding-right:10px}
.i7{float:left;padding-right:60px;padding-left:10px}
.i8{float:left;width:85px}
.i4{float:left;width:100px}
.i3{float:left;width:60px;padding-left:10px}
.i5{float:left}

.letter_table_title{float:left;width:475px;height:32px;line-height:32px;white-space:nowrap;overflow:hidden}
</style>
<script language="javascript">
function FMouseOver(curobj,nextid)
{
if(nextid!=''){
var o=document.getElementById(nextid);
o.className='Tmphd';
}
curobj.className='Curhd';
}
function FMouseOut(curobj,nextid)
{
if(nextid!=''){
var o=document.getElementById(nextid);
o.className='hd';
}
curobj.className='hd';
}
</script>
</head>

<body>
<div class="TableListBox">
<div class="letter">
<div class="hd2">
<ul>
<li class="i1"><input name="checkbox_inbox" type="checkbox" value="" checked="checked" /></li>
<li class="i6"><strong>全选</strong></li>
<li class="letter_table_title"><strong>标题</strong> </li>
<li class="i7"> <strong>发信人</strong> </li>
<li class="i5"> <strong>发送时间</strong> </li>
</ul>

</div>
<div class="hd" id="lst1" onmousemove="FMouseOver(this,'lst2');" onmouseout="FMouseOut(this,'lst2');">
<ul>
<li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
<li class="i2"><img src="images/front/img/icon_11.gif" /></li>
<li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
<li class="red i8">中演出票务通</li>
<li class="i5">2009-5-30  19:30:30</li>
</ul>
</div>
<div class="hd" id="lst2" onmousemove="FMouseOver(this,'lst3');" onmouseout="FMouseOut(this,'lst3');">
<ul>
<li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
<li class="i2"><img src="images/front/img/icon_11.gif" /></li>
<li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
<li class="red i8">中演出票务通</li>
<li class="i5">2009-5-30  19:30:30</li>
</ul>
</div>
<div class="hd" id="lst3" onmousemove="FMouseOver(this,'lst4');" onmouseout="FMouseOut(this,'lst4');">
<ul>
<li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
<li class="i2"><img src="images/front/img/icon_11.gif" /></li>
<li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
<li class="red i8">中演出票务通</li>
<li class="i5">2009-5-30  19:30:30</li>
</ul>
</div>
<div class="hd" id="lst4" onmousemove="FMouseOver(this,'lst5');" onmouseout="FMouseOut(this,'lst5');">
<ul>
<li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
<li class="i2"><img src="images/front/img/icon_11.gif" /></li>
<li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
<li class="red i8">中演出票务通</li>
<li class="i5">2009-5-30  19:30:30</li>
</ul>
</div>
<div class="hd" id="lst5" onmousemove="FMouseOver(this,'lst6');" onmouseout="FMouseOut(this,'lst6');">
<ul>
<li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
<li class="i2"><img src="images/front/img/icon_11.gif" /></li>
<li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
<li class="red i8">中演出票务通</li>
<li class="i5">2009-5-30  19:30:30</li>
</ul>
</div>
<div class="hd" id="lst6" onmousemove="FMouseOver(this,'lst7');" onmouseout="FMouseOut(this,'lst7');">
<ul>
<li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
<li class="i2"><img src="images/front/img/icon_11.gif" /></li>
<li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
<li class="red i8">中演出票务通</li>
<li class="i5">2009-5-30  19:30:30</li>
</ul>
</div>
<div class="hd" id="lst7" onmousemove="FMouseOver(this,'');" onmouseout="FMouseOut(this,'');">
<ul>
<li class="i1"><input name="checkbox_inbox" type="checkbox" value="" /></li>
<li class="i2"><img src="images/front/img/icon_11.gif" /></li>
<li class="letter_table_title">PURE@MILD 我要春节回家开演唱会</li>
<li class="red i8">中演出票务通</li>
<li class="i5">2009-5-30  19:30:30</li>
</ul>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航