CSS 鼠标响应事件，鼠标经过CSS，鼠标移动CSS，鼠标点击CSS

最新推荐文章于 2024-04-19 05:19:48 发布

苍月代表我

最新推荐文章于 2024-04-19 05:19:48 发布

阅读量1.1w

点赞数 1

几种鼠标触发CSS事件。

说明：

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

<html>

<head>

<title>CSS 鼠标响应事件</title>

.Off{ background-color: #00FF66; padding:100px;}

.up{background-color: #FF0000; padding:100px}

</style>

</head>

<body>

<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;   width: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" />

苍月代表我

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS 鼠标响应事件，鼠标经过CSS，鼠标移动CSS，鼠标点击CSS

几种鼠标触发CSS事件。说明：onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 onMouseMove 鼠标移动时触 CSS 鼠标响应事件.Off{ background-color: #
复制链接

扫一扫