HTML元素设置鼠标事件

来源：互联网发布：淘宝店铺模板代码编辑：程序博客网时间：2024/05/21 21:02

HTML元素设置鼠标事件

常见的鼠标事件

onMouseDown     按下鼠标时onMouseUp       松开鼠标时 onMouseOver     鼠标经过时onMouseOut      鼠标移出时 onMouseMove     鼠标移动时

代码

<style type="text/css">     .x-grid-row {        line-height: 13px;        vertical-align: top;        padding: 0 1px;        user-select: none;        -o-user-select: none;        -ms-user-select: none;        -moz-user-select: -moz-none;        -webkit-user-select: none;        cursor: default    }    .x-grid-row-over {        border-color: #dddddd;  /* 边框颜色 */        background-color: #efefef  /* 背景颜色 */    }    .x-grid-row-selected {        border-style: dotted;  /* 边框样式 */        border-color: #e0e0e0;        background-color: #e0e0e0 !important    }</style>

对事件指定样式

<body>    <div >        <tr class="x-grid-row"             onMouseOver="this.className='x-grid-row-over'"            onMouseDown="this.className='x-grid-row-selected'" >            <td>                                         <div style="text-align: left;">                                                                                  鼠标事件测试                                                                      </div>           </td>                                                                                                        </tr>    </div></body>

鼠标事件在表格上的应用

行渲染，相邻两行不同色

<style type="text/css">     tr {        background-color:expression((this.sectionRowIndex%2==0)?"#FFFFFF":"#6FA8DC")    } </style>

单元格渲染，每个单元格背景色不同

<style type="text/css">     tr {        background-color:expression((this.sectionRowIndex%2==0)?"#FFFFFF":"#6FA8DC")    }     td {        background-color:expression((this.cellIndex%2==0)?""((this.parentElement.sectionRowIndex%2==0)?"gray":"blue"))    } </style>

ps: 本文主要是记录鼠标事件如何引用样式的方法

阅读全文

0 0