zoukankan      html  css  js  c++  java
  • CSS鼠标响应事件经过、移动、点击示例介绍

    本文为大家介绍下CSS 鼠标响应事件:鼠标经过CSS、鼠标移动CSS、鼠标点击CSS以及示例,喜欢的朋友可以参考下
     

    几种鼠标触发CSS事件。
    说明:
    onMouseDown 按下鼠标时触发
    onMouseOver 鼠标经过时触发
    onMouseUp 按下鼠标松开鼠标时触发
    onMouseOut 鼠标移出时触发
    onMouseMove 鼠标移动时触

    复制代码 代码如下:

    <html>
    <head>
    <title>CSS 鼠标响应事件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    .Off{ padding:100px;}
    .up{background-color: #FF0000; padding:100px}
    </style>
    </head>
    <body>
    <ul class="Off" onMouseOut="this.className='Off'" onMouseOver="this.className='Up'">
    <h4>鼠标响应事件 当鼠标经过移出时切换css</h4>
    <li>onMouseDown 按下鼠标时触发
    <li>onMouseOver 鼠标经过时触发
    <li>onMouseUp 按下鼠标松开鼠标时触发
    <li>onMouseOut 鼠标移出时触发
    <li>onMouseMove 鼠标移动时触发 </li>
    </ul>
    </body>
    </html>
    复制代码 代码如下:

    <span style="color: red;">鼠标经过表格变色样式:<br></span>
    复制代码 代码如下:

    <style>
    table { background-color:#000000; cursor:hand; 100%; }
    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>
    控制表格隔行变色:
    简单应用:
    <style type="text/css">
    <!--
    tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
    -->
    高级应用:每个单元格变色
    <style type="text/css">
    <!--
    tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
    td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
    -->
    </style>


    添加CSS文件引用:

    复制代码 代码如下:


    <link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" />

  • 相关阅读:
    Sqli-labs Less-37 利用 ' 的utf-16突破mysql_real_escape_string()函数转义
    Sqli-labs Less-36 宽字节注入 绕过mysql_real_escape_string()函数转义
    闭包
    JavaScript(1)
    css和JavaScript
    解决奇怪的错误。访问的网页一直被拦截
    html网页乱码解决
    BZOJ 3676: [Apio2014]回文串 回文树 回文自动机
    BZOJ 3676: [Apio2014]回文串 后缀自动机 Manacher 倍增
    BZOJ 3238: [Ahoi2013]差异 后缀自动机 树形dp
  • 原文地址:https://www.cnblogs.com/ZDPPU/p/6007044.html
Copyright © 2011-2022 走看看