注    册
密 码 忘记密码
保存密码         取消
注    册
密 码 忘记密码
保存密码         取消

我的日志

在CSS样式中利用expression实现鼠标事件

分类:网络
2006.12.11 15:42 作者: → 千里之外 ← | 评论:0 | 阅读:0

如何在CSS样式中利用expression实现javascript中的onmouseover/onmouseout事件

/*当鼠标移动到这里(比如表格里的一行)的时候背景色变化为黄色*/
onmouseover: expression(onmouseover=function (){this.style.backgroundColor ='yellow'});

/*当鼠标移动到这里的时候背景色还原为原来的颜色*/
onmouseout: expression(onmouseout=function (){this.style.backgroundColor =''});

下面的实例在CSS样式表里使用onmouseover/onmouseout事件;当移动到单元格的时候该单元格的背景色/边框/文字颜色将改变。根据需要可以加入其它的属性,实现一些简单的网页特效。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> CSS样式里使用javascript(onmouseover/onmouseout)2</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type="text/css">
table
{

 background-color:#000000;
 cursor:hand;
}

td
{
  /*设置onmouseover事件*/
  onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'});

  /*设置onmouseout事件*/
  onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
  background-color:#ffffff;
}
</style>
</HEAD>

<BODY>
<TABLE cellspacing='1px' border='1'>
<TR>
 <TD>风儿吹散了蒲公英......    </TD>
 <TD>风儿吹散了蒲公英......   </TD>
 <TD>风儿吹散了蒲公英......   </TD>
</TR>
<TR>
 <TD>风儿吹散了蒲公英......    </TD>
 <TD>风儿吹散了蒲公英......   </TD>
 <TD>风儿吹散了蒲公英......   </TD>
</TR>
</TABLE>
</BODY>
</HTML>

你可以通过这个链接引用该篇文章:http://pc372.bokee.com/viewdiary.13999250.html

            shtml精简教程 上一篇 | 下一篇 使用Net命令管理...

我的广告

我的搜索

文章评论

添加评论

已有0位对此文章感兴趣的网友发表了看法 【点击查看】
昵  称:  主  页: (选填)
验证码: