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: 本文主要是记录鼠标事件如何引用样式的方法
转载请注明原文地址: https://www.6miu.com/read-64367.html
