javascript學習筆記(二) 鼠標經(jīng)過時,改變div塊的背景色的代碼
更新時間:2011年04月08日 00:18:05 作者:
javascript學習筆記(二) 鼠標經(jīng)過時,改變div塊的背景色的實現(xiàn)代碼,當然也可以用css實現(xiàn)。
HTML部分代碼:
<ul>
<li>鼠標經(jīng)過時改變背景色</li>
<li>鼠標經(jīng)過時改變背景色</li>
<li>鼠標經(jīng)過時改變背景色</li>
<li>鼠標經(jīng)過時改變背景色</li>
</ul>
javascript部分代碼:
當鼠標經(jīng)過時,給li添加class="current"類,鼠標離開時,去除該類,達到改變背景色的目的
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;
}
上面的代碼,主要是方便大家更多的認識js,下面提供一個css實現(xiàn)的版本。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
復制代碼 代碼如下:
<ul>
<li>鼠標經(jīng)過時改變背景色</li>
<li>鼠標經(jīng)過時改變背景色</li>
<li>鼠標經(jīng)過時改變背景色</li>
<li>鼠標經(jīng)過時改變背景色</li>
</ul>
javascript部分代碼:
當鼠標經(jīng)過時,給li添加class="current"類,鼠標離開時,去除該類,達到改變背景色的目的
復制代碼 代碼如下:
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;
}
上面的代碼,主要是方便大家更多的認識js,下面提供一個css實現(xiàn)的版本。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- JS實現(xiàn)側邊欄鼠標經(jīng)過彈出框+緩沖效果
- js鼠標經(jīng)過tab選項卡時實現(xiàn)切換延遲
- 原生態(tài)js,鼠標按下后,經(jīng)過了那些單元格的簡單實例
- JS+CSS實現(xiàn)鼠標經(jīng)過彈出一個DIV框完整實例(帶緩沖動畫漸變效果)
- js實現(xiàn)鼠標經(jīng)過表格行變色的方法
- js實現(xiàn)鼠標經(jīng)過時圖片滾動停止的方法
- JS實現(xiàn)鼠標經(jīng)過好友列表中的好友頭像時顯示資料卡的效果
- 鼠標經(jīng)過顯示二級菜單js特效
- Javascript實現(xiàn)的鼠標經(jīng)過時播放聲音
- js實現(xiàn)圖片顯示局部,鼠標經(jīng)過顯示全部的效果
- vue實現(xiàn)鼠標經(jīng)過動畫
相關文章
簡介JavaScript中setUTCSeconds()方法的使用
這篇文章主要介紹了簡介JavaScript中setUTCSeconds()方法的使用,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06