HTML元素设置鼠标事件

最新推荐文章于 2024-04-16 19:44:59 发布

joexk

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量4.7k

点赞数 1

分类专栏： HTML 文章标签： html css 鼠标事件

本文链接：https://blog.csdn.net/zhouxukun123/article/details/72905385

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>