javascript學(xué)習(xí)筆記(二) 鼠標(biāo)經(jīng)過時(shí),改變div塊的背景色的代碼
更新時(shí)間:2011年04月08日 00:18:05 作者:
javascript學(xué)習(xí)筆記(二) 鼠標(biāo)經(jīng)過時(shí),改變div塊的背景色的實(shí)現(xiàn)代碼,當(dāng)然也可以用css實(shí)現(xiàn)。
HTML部分代碼:
<ul>
<li>鼠標(biāo)經(jīng)過時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過時(shí)改變背景色</li>
</ul>
javascript部分代碼:
當(dāng)鼠標(biāo)經(jīng)過時(shí),給li添加class="current"類,鼠標(biāo)離開時(shí),去除該類,達(dá)到改變背景色的目的
window.onload = function() {
var lis = document.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover = function() {
this.setAttribute("class", "current");
}
lis[i].onmouseout = function() {
this.setAttribute("class", "");
}
}
}
css部分代碼:
ul li.current {
background-color:red;
cursor:pointer;
}
上面的代碼,主要是方便大家更多的認(rèn)識(shí)js,下面提供一個(gè)css實(shí)現(xiàn)的版本。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
復(fù)制代碼 代碼如下:
<ul>
<li>鼠標(biāo)經(jīng)過時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過時(shí)改變背景色</li>
</ul>
javascript部分代碼:
當(dāng)鼠標(biāo)經(jīng)過時(shí),給li添加class="current"類,鼠標(biāo)離開時(shí),去除該類,達(dá)到改變背景色的目的
復(fù)制代碼 代碼如下:
window.onload = function() {
var lis = document.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover = function() {
this.setAttribute("class", "current");
}
lis[i].onmouseout = function() {
this.setAttribute("class", "");
}
}
}
css部分代碼:
復(fù)制代碼 代碼如下:
ul li.current {
background-color:red;
cursor:pointer;
}
上面的代碼,主要是方便大家更多的認(rèn)識(shí)js,下面提供一個(gè)css實(shí)現(xiàn)的版本。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- JS實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過彈出框+緩沖效果
- js鼠標(biāo)經(jīng)過tab選項(xiàng)卡時(shí)實(shí)現(xiàn)切換延遲
- 原生態(tài)js,鼠標(biāo)按下后,經(jīng)過了那些單元格的簡單實(shí)例
- JS+CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出一個(gè)DIV框完整實(shí)例(帶緩沖動(dòng)畫漸變效果)
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過表格行變色的方法
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)圖片滾動(dòng)停止的方法
- JS實(shí)現(xiàn)鼠標(biāo)經(jīng)過好友列表中的好友頭像時(shí)顯示資料卡的效果
- 鼠標(biāo)經(jīng)過顯示二級菜單js特效
- Javascript實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)播放聲音
- js實(shí)現(xiàn)圖片顯示局部,鼠標(biāo)經(jīng)過顯示全部的效果
- vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過動(dòng)畫
相關(guān)文章
簡介JavaScript中setUTCSeconds()方法的使用
這篇文章主要介紹了簡介JavaScript中setUTCSeconds()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06JavaScript基礎(chǔ)心法 數(shù)據(jù)類型
一個(gè)很基礎(chǔ)的知識(shí)點(diǎn),這篇主要是介紹JavaScript中基本數(shù)據(jù)類型和引用數(shù)據(jù)類型是如何存儲(chǔ)的,需要的朋友可以參考下2018-03-03parentElement,srcElement的使用小結(jié)
本篇文章主要是對parentElement,srcElement的使用進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01Javascript的時(shí)間戳和php的時(shí)間戳轉(zhuǎn)換注意事項(xiàng)
需要注意的是js的時(shí)間戳是13位,php的時(shí)間戳是10位,轉(zhuǎn)換函數(shù)如下,感興趣的朋友可以參考下哈2013-04-04JavaScript中的勻速運(yùn)動(dòng)和變速(緩沖)運(yùn)動(dòng)詳細(xì)介紹
一個(gè)div的運(yùn)動(dòng)其實(shí)就是它與瀏覽器邊框的距離在變動(dòng)。如果他變化的速率一定,那就是勻速運(yùn)動(dòng);如果變化的速率不一定,那么就是變速運(yùn)動(dòng)2012-11-11