方法一：写在标签内的鼠标经过的语句
<table width="100%" border="1" cellpadding="3" cellspacing="0" bordercolor="#efefef" bgcolor="#efefef">
<tr><td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><div align="left">懒人图库</div></td>
</tr>
<tr>
<td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">懒人图库</td>
</tr>
<tr>
<td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">懒人图库</td>
</tr>
</table>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
以上写法有错：.borderColor之类的前面一定要有style，因为是改变行内样式，如果是classname就不用，如onMouseOut="this.style.background='url(image/login_2.jpg)'"
，一定要'url()',不然出错。
<div class="cbt2" onMouseOver="this.className='cbt1'" onMouseOut="this.className='cbt2'"><span class="btsue" onMouseOver=" this.style.color='#FFFFFF'" onMouseOut="this.style.color='#0066cc'" >确 认</span></div>
方法二：
<style>
<!--
.datalist{
border:1px solid #0058a3;
font-family:Arial, Helvetica, sans-serif;
border-collapse:collapse;
background-color:#eaf5ff;
font-size:14px;
}
.datalist td{
border:1px solid #0058a3 ;
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
}
.datalist tr.altrow{/*.datalist tr:hover,*/
background-color:#00FFFF;
color:#F00;
}
.datalist caption{ background-color:#f3f3f3; float:left; height:30px; line-height:30px; font-size:16px; font-weight:bold;}
-->
</style>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay">
<caption>主要参数</caption>
<tr ><!--onMouseOver="this.bgColor='#cccccc'"; onMouseOut="this.bgColor='#eaf5ff'" -->
<td>66</td>
<td>男</td>
<td>身份证号：3306119239193949839</td>
<td>医疗卡号:PYZK536</td>
<td>06-22 10:20</td>
<td>随访次数:3</td>
<td>136*******</td>
<td>杭州市西湖区文三路某某小区x幢x单位xx号*</td>
</tr>
<tr>
<td>66</td>
<td>男</td>
<td>身份证号：3306119239193949839</td>
<td>医疗卡号:PYZK536</td>
<td>06-22 10:20</td>
<td>随访次数:3</td>
<td>136*******</td>
<td>杭州市西湖区文三路某某小区x幢x单位xx号*</td>
</tr>
</table>
<script language="javascript">
var rows=document.getElementsByTagName('tr');
for (var i=0;i<rows.length;i++){
rows[i].οnmοuseοver=function(){
this.className+='altrow';
}
rows[i].οnmοuseοut=function(){
this.className=this.className.replace('altrow',"");
}
}
</script>
采用onmouseover onmouseout时，标签内部不能使用a标签，也不能再在css文件里设置标签的类
-----------------------------------------------------------------------------------------------------------------------------------------------
鼠标经过时单元格边框加粗，移走恢复 用单独的JS实现
这个CSS可以放在单独的CSS文件里，也可以放在html文件里
#fudon_tab{
position:absolute;
background:#FFFFFF center;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
width:300px;
height:186px;
/*border-color:#0066cc;
border-style:solid;*/
border-collapse:collapse;
}
#fudon_tab td{
background:url(lcon.png) no-repeat 35px 9px ;
border: #0066cc 1px solid;
font: 14px "宋体";
text-align:center;
color:#0066cc;
width:100px;
height:62px;
}
#fudon_tab .blods{
background:url(lcon.png) no-repeat 35px 9px ;
border: #0066cc 2px solid;
font: 14px "宋体";
text-align:center;
color:#0066cc;
width:100px;
height:62px;
}
<div id="to_click_img" style="display:none;">
<table id='fudon_tab' cellspacing='0px' ><tr valign='bottom'><td >健康档案管理</td><td >慢病管理系统</td><td >计划免疫</td></tr><tr valign='bottom'><td >传染病管理</td><td >老人保健管理</td><td >卫生监督协管</td></tr><tr valign='bottom'><td >妇幼保健管理</td><td >计划生育管理</td><td >查询与统计</td></tr></table>
</div>
JS要放到最底下，</body>之上
var tds=document.getElementById('fudon_tab').getElementsByTagName('td')
for (var i=0;i<tds.length;i++){
tds[i].οnmοuseοver=function(){
this.className+='blods';
}
tds[i].οnmοuseοut=function(){
this.className=this.className.replace(/blods/g,"") ;
}
}
1451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
