CSS鼠標(biāo)響應(yīng)事件經(jīng)過、移動(dòng)、點(diǎn)擊示例介紹
更新時(shí)間：2013年09月04日 16:15:36 作者：
本文為大家介紹下CSS 鼠標(biāo)響應(yīng)事件：鼠標(biāo)經(jīng)過CSS、鼠標(biāo)移動(dòng)CSS、鼠標(biāo)點(diǎn)擊CSS以及示例，喜歡的朋友可以參考下
幾種鼠標(biāo)觸發(fā)CSS事件。
說明：
onMouseDown 按下鼠標(biāo)時(shí)觸發(fā)
onMouseOver 鼠標(biāo)經(jīng)過時(shí)觸發(fā)
onMouseUp 按下鼠標(biāo)松開鼠標(biāo)時(shí)觸發(fā)
onMouseOut 鼠標(biāo)移出時(shí)觸發(fā)
onMouseMove 鼠標(biāo)移動(dòng)時(shí)觸
<html>
<head>
<title>CSS 鼠標(biāo)響應(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>鼠標(biāo)響應(yīng)事件 當(dāng)鼠標(biāo)經(jīng)過移出時(shí)切換css</h4>
<li>onMouseDown 按下鼠標(biāo)時(shí)觸發(fā)
<li>onMouseOver 鼠標(biāo)經(jīng)過時(shí)觸發(fā)
<li>onMouseUp 按下鼠標(biāo)松開鼠標(biāo)時(shí)觸發(fā)
<li>onMouseOut 鼠標(biāo)移出時(shí)觸發(fā)
<li>onMouseMove 鼠標(biāo)移動(dòng)時(shí)觸發(fā) </li>
</ul>
</body>
</html>
<span style="color: red;">鼠標(biāo)經(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)用:每個(gè)單元格變色
<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 按下鼠標(biāo)時(shí)觸發(fā)
onMouseOver 鼠標(biāo)經(jīng)過時(shí)觸發(fā)
onMouseUp 按下鼠標(biāo)松開鼠標(biāo)時(shí)觸發(fā)
onMouseOut 鼠標(biāo)移出時(shí)觸發(fā)
onMouseMove 鼠標(biāo)移動(dòng)時(shí)觸
復(fù)制代碼 代碼如下:
<html>
<head>
<title>CSS 鼠標(biāo)響應(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>鼠標(biāo)響應(yīng)事件 當(dāng)鼠標(biāo)經(jīng)過移出時(shí)切換css</h4>
<li>onMouseDown 按下鼠標(biāo)時(shí)觸發(fā)
<li>onMouseOver 鼠標(biāo)經(jīng)過時(shí)觸發(fā)
<li>onMouseUp 按下鼠標(biāo)松開鼠標(biāo)時(shí)觸發(fā)
<li>onMouseOut 鼠標(biāo)移出時(shí)觸發(fā)
<li>onMouseMove 鼠標(biāo)移動(dòng)時(shí)觸發(fā) </li>
</ul>
</body>
</html>
復(fù)制代碼 代碼如下:
<span style="color: red;">鼠標(biāo)經(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)用:每個(gè)單元格變色
<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" />
您可能感興趣的文章:
- js 鼠標(biāo)點(diǎn)擊事件及其它捕獲
- 關(guān)于window.pageYOffset和document.documentElement.scrollTop
- js鼠標(biāo)點(diǎn)擊事件在各個(gè)瀏覽器中的寫法及Event對象屬性介紹
- 為GridView的行添加鼠標(biāo)經(jīng)過、點(diǎn)擊事件的小例子
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- js監(jiān)聽鼠標(biāo)點(diǎn)擊和鍵盤點(diǎn)擊事件并自動(dòng)跳轉(zhuǎn)頁面
- 鼠標(biāo)事件的screenY,pageY,clientY,layerY,offsetY屬性詳解
相關(guān)文章
相冊展示PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了相冊展示PhotoSwipe.js插件實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
服務(wù)器端js（Server-Side Javascrpt）很早也就有了，JAVA中也有javascript 的script引擎。2010-12-12
js中toString()和String()區(qū)別詳解
本文主要介紹了js中toSring()和Sring()的區(qū)別。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
在Web應(yīng)用中,當(dāng)一個(gè)網(wǎng)頁的腳本試圖去請求另一個(gè)域名下的資源時(shí),就會(huì)遇到跨域問題,跨域問題是由瀏覽器的同源策略所引起的,本文給大家介紹了JavaScript解決跨域的三種方法,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了微信小程序webSocket的使用方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JS實(shí)現(xiàn)表單中點(diǎn)擊小眼睛顯示隱藏密碼框中的密碼
這篇文章主要介紹了JS實(shí)現(xiàn)表單中點(diǎn)擊小眼睛顯示隱藏密碼框中的密碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考價(jià)值,需要的朋友可以參考下2020-04-04
用JS實(shí)現(xiàn)了一個(gè)拖拽排序，可因Jquery版本不同導(dǎo)致瀏覽器訪問時(shí)存在很多的問題，下面為大家介紹下具體的解決方法，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了詳解微信小程序的 request 封裝示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
JavaScript中this函數(shù)使用實(shí)例解析
這篇文章主要介紹了JavaScript中this函數(shù)使用實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
Javascript的無new構(gòu)建實(shí)例詳解
這篇文章主要介紹了Javascript的無new構(gòu)建實(shí)例詳解的相關(guān)資料，小編感覺介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05