CSS鼠標響應(yīng)事件經(jīng)過、移動、點擊示例介紹
更新時間:2013年09月04日 16:15:36 作者:
本文為大家介紹下CSS 鼠標響應(yīng)事件:鼠標經(jīng)過CSS、鼠標移動CSS、鼠標點擊CSS以及示例,喜歡的朋友可以參考下
幾種鼠標觸發(fā)CSS事件。
說明:
onMouseDown 按下鼠標時觸發(fā)
onMouseOver 鼠標經(jīng)過時觸發(fā)
onMouseUp 按下鼠標松開鼠標時觸發(fā)
onMouseOut 鼠標移出時觸發(fā)
onMouseMove 鼠標移動時觸
<html>
<head>
<title>CSS 鼠標響應(yīng)事件</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.Off{ background-color: #00FF66; padding:100px;}
.up{background-color: #FF0000; padding:100px}
</style>
</head>
<body>
<ul class=Off onMouseOut="this.className='Off'" onMouseOver="this.className='Up'">
<h4>鼠標響應(yīng)事件 當鼠標經(jīng)過移出時切換css</h4>
<li>onMouseDown 按下鼠標時觸發(fā)
<li>onMouseOver 鼠標經(jīng)過時觸發(fā)
<li>onMouseUp 按下鼠標松開鼠標時觸發(fā)
<li>onMouseOut 鼠標移出時觸發(fā)
<li>onMouseMove 鼠標移動時觸發(fā) </li>
</ul>
</body>
</html>
<span style="color: red;">鼠標經(jīng)過表格變色樣式:<br></span>
<style>
table { background-color:#000000; cursor:hand; width:100%; }
td {
/*設(shè)置onmouseover事件*/
onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'});
/*設(shè)置onmouseout事件*/
onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
background-color:#ffffff;
}
</style>
控制表格隔行變色:
簡單應(yīng)用:
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
-->
高級應(yīng)用:每個單元格變色
<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" />
說明:
onMouseDown 按下鼠標時觸發(fā)
onMouseOver 鼠標經(jīng)過時觸發(fā)
onMouseUp 按下鼠標松開鼠標時觸發(fā)
onMouseOut 鼠標移出時觸發(fā)
onMouseMove 鼠標移動時觸
復(fù)制代碼 代碼如下:
<html>
<head>
<title>CSS 鼠標響應(yīng)事件</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.Off{ background-color: #00FF66; padding:100px;}
.up{background-color: #FF0000; padding:100px}
</style>
</head>
<body>
<ul class=Off onMouseOut="this.className='Off'" onMouseOver="this.className='Up'">
<h4>鼠標響應(yīng)事件 當鼠標經(jīng)過移出時切換css</h4>
<li>onMouseDown 按下鼠標時觸發(fā)
<li>onMouseOver 鼠標經(jīng)過時觸發(fā)
<li>onMouseUp 按下鼠標松開鼠標時觸發(fā)
<li>onMouseOut 鼠標移出時觸發(fā)
<li>onMouseMove 鼠標移動時觸發(fā) </li>
</ul>
</body>
</html>
復(fù)制代碼 代碼如下:
<span style="color: red;">鼠標經(jīng)過表格變色樣式:<br></span>
復(fù)制代碼 代碼如下:
<style>
table { background-color:#000000; cursor:hand; width:100%; }
td {
/*設(shè)置onmouseover事件*/
onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'});
/*設(shè)置onmouseout事件*/
onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
background-color:#ffffff;
}
</style>
控制表格隔行變色:
簡單應(yīng)用:
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
-->
高級應(yīng)用:每個單元格變色
<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文件引用:
復(fù)制代碼 代碼如下:
<link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" />
相關(guān)文章
JS實現(xiàn)動態(tài)倒計時功能(天數(shù)、時、分、秒)
這篇文章主要介紹了JS實現(xiàn)動態(tài)倒計時功能詳解(天數(shù)、時、分、秒),需要的朋友可以參考下2019-12-12js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法
下面小編就為大家?guī)硪黄猨s調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11