程序博客网 > 淘宝交易资金保障

鼠标移过变换颜色字体之类

来源：互联网发布：淘宝交易资金保障编辑：程序博客网时间：2024/05/16 11:49

方法一：写在标签内的鼠标经过的语句

<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>

</style>

</head>

<body>
<table class="datalist" summary="list of members in EE Studay">
<caption>主要参数</caption>
      <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>
      <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].onmouseover=function(){
           this.className+='altrow';
       }
       rows[i].onmouseout=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].onmouseover=function(){
           this.className+='blods';
       }
       tds[i].onmouseout=function(){
          this.className=this.className.replace(/blods/g,"") ;
       }
      }

淘宝交易资金保障

淘宝交易资金保障

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子关羽属什么生肖关胜是关羽的后代吗赵云和关羽谁厉害演关羽的演员关羽的性格特点是什么关羽性格特征关羽怎么死的被谁杀的关羽是谁杀的关羽霸气图片关羽是什么生肖关羽是个什么样的人形容关羽的成语关羽被谁杀的关羽脸谱图片三国关羽怎么死的关羽有几个孩子关羽单刀赴会关羽怎么出装关羽死在哪里关羽是怎么死的历史上的关羽关羽败走麦城关羽的故事有哪些许褚和关羽谁厉害关羽的老婆是谁关羽儿子叫啥关羽活了多少岁关羽墓出土后的照片关羽是怎么样的人关羽第几集死的庞德抬棺战关羽关羽刮骨疗伤和谁下棋关羽用的什么刀关羽败走麦城简述关羽是被谁杀的关羽被谁杀死的关羽老婆叫什么关羽水淹七军简介三国志11关羽投降关羽我的刀爆了神将世界关羽pk