javascript學(xué)習(xí)筆記（二） 鼠標(biāo)經(jīng)過(guò)時(shí)，改變div塊的背景色的代碼
更新時(shí)間：2011年04月08日 00:18:05 作者：
javascript學(xué)習(xí)筆記（二） 鼠標(biāo)經(jīng)過(guò)時(shí)，改變div塊的背景色的實(shí)現(xiàn)代碼，當(dāng)然也可以用css實(shí)現(xiàn)。
HTML部分代碼：
<ul>
<li>鼠標(biāo)經(jīng)過(guò)時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過(guò)時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過(guò)時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過(guò)時(shí)改變背景色</li>
</ul>
javascript部分代碼：
當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，給li添加class="current"類，鼠標(biāo)離開(kāi)時(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需再刷新一下頁(yè)面才能執(zhí)行]
復(fù)制代碼 代碼如下:
<ul>
<li>鼠標(biāo)經(jīng)過(guò)時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過(guò)時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過(guò)時(shí)改變背景色</li>
<li>鼠標(biāo)經(jīng)過(guò)時(shí)改變背景色</li>
</ul>
javascript部分代碼：
當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，給li添加class="current"類，鼠標(biāo)離開(kāi)時(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需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- JS實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過(guò)彈出框+緩沖效果
- js鼠標(biāo)經(jīng)過(guò)tab選項(xiàng)卡時(shí)實(shí)現(xiàn)切換延遲
- 原生態(tài)js,鼠標(biāo)按下后,經(jīng)過(guò)了那些單元格的簡(jiǎn)單實(shí)例
- JS+CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出一個(gè)DIV框完整實(shí)例(帶緩沖動(dòng)畫漸變效果)
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)表格行變色的方法
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)圖片滾動(dòng)停止的方法
- JS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)好友列表中的好友頭像時(shí)顯示資料卡的效果
- 鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效
- Javascript實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)播放聲音
- js實(shí)現(xiàn)圖片顯示局部，鼠標(biāo)經(jīng)過(guò)顯示全部的效果
- vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫
相關(guān)文章
其實(shí)通俗的說(shuō)就是一個(gè)有名稱的代碼段，方便重用。2010-04-04
JavaScript中操作字符串之localeCompare()方法的使用
這篇文章主要介紹了JavaScript中操作字符串之localeCompare()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
javascript向flash swf文件傳遞參數(shù)值注意細(xì)節(jié)
如何使用javascript向SWF文件傳遞參數(shù)?在網(wǎng)上找了一個(gè)完整的教程，很有啟發(fā)性和實(shí)用性，如下是完整實(shí)現(xiàn)的步驟,需要的朋友可以參考下2012-12-12
下面小編就為大家?guī)?lái)一篇深入剖析JavaScript:Object類型。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
本文給大家匯總介紹了常用的javascript字符串函數(shù)，分為自帶函數(shù)和擴(kuò)展函數(shù)2部分，希望大家能夠喜歡。2015-12-12
JavaScript中幾個(gè)重要的屬性(this、constructor、prototype)介紹
this表示當(dāng)前對(duì)象，如果在全局作用范圍內(nèi)使用this，則指代當(dāng)前頁(yè)面對(duì)象window，prototype本質(zhì)上還是一個(gè)JavaScript對(duì)象，constructor始終指向創(chuàng)建當(dāng)前對(duì)象的構(gòu)造函數(shù)2013-05-05
javascript中的107個(gè)基礎(chǔ)知識(shí)收集整理 推薦
這篇文章對(duì)于初學(xué)者絕對(duì)是個(gè)不錯(cuò)的整理，需要的朋友可以收藏下。2010-03-03
JavaScript For Beginners(轉(zhuǎn)載)
JavaScript For Beginners(轉(zhuǎn)載)...2007-01-01
本文主要詳細(xì)介紹了Javascript 裝載和執(zhí)行，并附上了詳細(xì)示例，給有需要的小伙伴們參考下吧2014-11-11
ajax上傳時(shí)參數(shù)提交不更新等相關(guān)問(wèn)題
我感覺(jué)好像這個(gè)上傳插件只在第一次點(diǎn)擊的時(shí)候?qū)嵗?shù)傳給后臺(tái)，所以以后值都是不變的，應(yīng)該怎么解決這個(gè)問(wèn)題呢2012-12-12