利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效

原创 2007年09月27日 09:07:00
在我们使前后台分开的同时,有时我们想也用CSS来实现只有在JS里才能实现的动作,看似不可能的事情,但经过我的努力,但很好的工作了.

       我们知道 CSS 的Exprssion 在IE窗体需要重画时以及有鼠标动作时执行.所以不能直接用它来实现,这样当你的内容多时再快的计算机也受不了(原因是你的鼠标动一下,Expression就执行好几百次).

       为了避免这种情况,我们让我们的Expression第一次执行一次操作,以后就简单的返回,这样就可以大大的节省CPU.

       费话少说,下面是示例代码(偶是程序员,也不知道说什么了!):

文件名:myfont.css
-----------------------------------------------------------
body
{
}

/*
作者:阿牛(牛昆亮) QQ:273352165 MSN:niukl@hotmail.com

声明:可以免费使用,请您保留此信息(大家都是作程序的,帮个忙了).
如果您有什么改过,记得告诉我!
*/
.dgInit
{
over:expression(((this.readyState=="complete") && (this.className=="dg")) || (
(
__evlon_init_tr=function(objTable){
var i;
for(i=0;i {
  objTable.rows[i].onmouseover=function(){this.className="dg_tr_mouseover"};
  objTable.rows[i].onmouseout=function(){this.className="dg_tr_normal"};
  objTable.rows[i].className="dg_tr_normal";
}

}
) ,(__evlon_init_tr(this)), (this.className="dg")));
}


.dg
{
  
}

/*表格行的全局CSS设置*/
.dg_tr_mouseover,.dg_tr_normal
{
font-style: italic;
color:blue;

}
.dg_tr_normal
{
background-color:#ffffff;

}

/*表格行的 OnMouseOver 时的CSS设置*/
.dg_tr_mouseover
{
background-color:#cccccc;
}

文件名:hello.htm
------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="myfont.css" rel="stylesheet" type="text/css">
</head>
<body >
<div class="note" id="showmsg">0</div>
<table class="dgInit"><!--只要这里加上 Class 就行了-->
  <tr >  
    <td> ni hao </td>
    <td> ni hao </td>
    <td> ni hao </td>
  </tr>
  <tr >  
    <td> ni hao </td>
    <td> ni hao </td>
    <td> ni hao </td>
  </tr>
</table>
<hr>
</body>
</html> 

Table的onMouseOver和onMouseOut鼠标事件的问题

看下面这段代码:我们需要给某个TABLE加上鼠标事件的时候,一般希望当鼠标滑在整个TABLE之上的时候做某些处理,当鼠标滑出TABLE的时候做另外的处理. 一般情况下你会用onmouseover和on...
  • fishsoul
  • fishsoul
  • 2007年09月26日 17:16
  • 5757

浅谈前端中的onmouseover 事件

修改别人的模板遇到一个问题,分类图的切换默认是五个,我想增加四个,一直没有增加成功。它使用的onmouseover 事件。 去查了一下: 定义和用法 onmouseover 事件...
  • weixin_36171533
  • weixin_36171533
  • 2017年04月02日 19:58
  • 796

JavaScript----onmouseover,onmouseout 事件

定义和用法 onmouseover 事件会在鼠标指针移动到指定的对象上时发生。 语法 onmouseover="SomeJavaScriptCode" 参数 描述 SomeJavaScrip...
  • u010398850
  • u010398850
  • 2013年08月14日 17:00
  • 823

table

无标题文档 table{ border:#3FF 1px solid; width:60%; } table th{ border:#3FF 1px solid; background-co...
  • u013921901
  • u013921901
  • 2014年04月16日 00:06
  • 283

CSS样式里使用JavaScript(onmouseover/onmouseout)

CSS样式里使用JavaScript(onmouseover/onmouseout)2table{ background-color:#000000; cursor:hand;}td{  /*设置o...
  • huo789
  • huo789
  • 2006年09月28日 16:17
  • 6330

关于下拉菜单的onmouseover事件

默认的是当点击上一层菜单的时候才会显示二级菜单,修改为当鼠标放在上一级菜单的时候二级菜单自动弹出。实现方法是将 stemapp/widgets/HeaderCrossMenu/Widget.js文件...
  • qq_15167261
  • qq_15167261
  • 2015年07月11日 13:57
  • 838

onmouseover支持的html标签

, , , , , , , , , , , , , , , , , , , , to , , , , , , , , , , , , , , , , , , , , , , , , , , , , ...
  • lishirong
  • lishirong
  • 2014年12月02日 09:50
  • 616

onmouseover和onmouseout的烦恼

一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout。   很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在...
  • cui55
  • cui55
  • 2015年06月02日 17:28
  • 700

把onmouseover事件写在css文件里面

一般的写法是直接在页面无素的标签里面写以下这样的代码:onmouseover="this.style.backgroundColor=#FFFFFF" onmouseout="this.style.b...
  • feng_wenzhu
  • feng_wenzhu
  • 2007年08月16日 18:03
  • 886

CSS expression属性实现javascript与CSS完美结合

本文向大家描述一下CSS expression属性如何将javascript与CSS结合起来,CSS中使用expression可以把CSS属性和Javas cript表达式关联起来,也就是说CSS属性...
  • gigizhui
  • gigizhui
  • 2015年09月16日 09:58
  • 451
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效
举报原因:
原因补充:

(最多只允许输入30个字)