zoukankan      html  css  js  c++  java
  • 如何在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>

    相关连接:
    1.CSS中expression使用简介
    http://adandelion.cnblogs.com/articles/269695.html (这里连接有问题,直接拷贝后才可在IE中打开)

    2.expression的应用之 -- 用CSS做出双色相间表格
     http://dev.csdn.net/article/22/22313.shtm

    诗词在线
    http://www.chinapoesy.com
    诗词在线 |唐诗|宋词|元曲|现代诗歌|外国诗歌
    126在线阅读网
    http://www.Read126.cn
    126在线阅读网 人物传记、古典名著、历史书籍。。。
  • 相关阅读:
    List<Map>遍历相加
    jqgrid属性
    idea Could not autowire. No beans of 'xxxx' type found
    【笔记】抓取百度贴吧
    python url中文转码
    python lxml 库
    Python 基础 (笔记)
    HTML 背景
    HTML Iframe
    HTML 响应式 Web 设计
  • 原文地址:https://www.cnblogs.com/adandelion/p/269573.html
Copyright © 2011-2022 走看看