使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過(guò)特效
更新時(shí)間：2015年01月30日 10:33:10 投稿：hebedich
這篇文章主要介紹了使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過(guò)特效的方法,需要的朋友可以參考下
代碼超級(jí)簡(jiǎn)單，這里就不多BB了，直接奉上
復(fù)制代碼 代碼如下:
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{margin:0; padding:0; list-style:none}
ul li{width:100px; height:100px; border:1px solid #f00; float:left; margin:50px 10px; background-color:#ffffff;}
ul li.current{border:1px solid #dfdfdf; background-color:#ff0000;}
</style>
<script type="text/javascript" src=">
</head>
<body>
<h1>鼠標(biāo)經(jīng)過(guò)下面的塊</h1>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<script type="text/javascript">
$("ul li").mouseover(function()
{
$(this).addClass("current");
}).mouseout(function()
{
$(this).removeClass("current");
});
</script>
非常簡(jiǎn)單的代碼，小伙伴們參考下，自由擴(kuò)展，希望大家能夠喜歡。
您可能感興趣的文章:
- 兼容ie和firefox的鼠標(biāo)經(jīng)過(guò)(onmouseover和onmouseout)實(shí)現(xiàn)--簡(jiǎn)短版
- js實(shí)現(xiàn)圖片顯示局部，鼠標(biāo)經(jīng)過(guò)顯示全部的效果
- Javascript實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)播放聲音
- 鼠標(biāo)經(jīng)過(guò)導(dǎo)航菜單時(shí)顏色改變效果
- javascript學(xué)習(xí)筆記（二） 鼠標(biāo)經(jīng)過(guò)時(shí)，改變div塊的背景色的代碼
- javascript中onmouse事件在div中失效問(wèn)題的解決方法
- jquery插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片右側(cè)顯示大圖的效果(類似淘寶)
- 鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效
- CSS鼠標(biāo)響應(yīng)事件經(jīng)過(guò)、移動(dòng)、點(diǎn)擊示例介紹
- jquery左右滾動(dòng)焦點(diǎn)圖banner圖片鼠標(biāo)經(jīng)過(guò)顯示上下頁(yè)按鈕
- jquery給圖片添加鼠標(biāo)經(jīng)過(guò)時(shí)的邊框效果
- jquery簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)導(dǎo)航條改變背景圖
- 鼠標(biāo)經(jīng)過(guò)tr時(shí),改變tr當(dāng)前背景顏色
- Jquery中國(guó)地圖熱點(diǎn)效果-鼠標(biāo)經(jīng)過(guò)彈出提示層信息的簡(jiǎn)單實(shí)例
- jq實(shí)現(xiàn)酷炫的鼠標(biāo)經(jīng)過(guò)圖片翻滾效果
- jQuery 鼠標(biāo)經(jīng)過(guò)(hover)事件的延時(shí)處理示例
相關(guān)文章
這篇文章主要介紹了layer彈窗插件操作方法,結(jié)合實(shí)例形式詳細(xì)分析了layer彈窗插件的下載、調(diào)用、設(shè)置等具體步驟與操作技巧,需要的朋友可以參考下2017-05-05
Javascript 兼容firefox的一些問(wèn)題
上午在做一些測(cè)試.把頁(yè)面拿到火狐上去就出現(xiàn)一堆問(wèn)題.頁(yè)面布局先不說(shuō).Javascript代碼的問(wèn)題就夠頭疼2009-05-05
js判斷復(fù)選框是否選中及選中個(gè)數(shù)的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇js判斷復(fù)選框是否選中及選中個(gè)數(shù)的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
TypeScript泛型參數(shù)默認(rèn)類型和新的strict編譯選項(xiàng)
這篇文章主要介紹了TypeScript泛型參數(shù)默認(rèn)類型和新的strict編譯選項(xiàng)，對(duì)TypeScript感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了JavaScript中的多種對(duì)象合并方法,通過(guò)代碼的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下，希望能夠給你帶來(lái)幫助2021-08-08
JavaScript實(shí)現(xiàn)頁(yè)面無(wú)操作倒計(jì)時(shí)退出
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁(yè)面無(wú)操作倒計(jì)時(shí)退出,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript高級(jí)程序設(shè)計(jì) 錯(cuò)誤處理與調(diào)試學(xué)習(xí)筆記
JavaScript高級(jí)程序設(shè)計(jì) 錯(cuò)誤處理與調(diào)試學(xué)習(xí)筆記，學(xué)習(xí)js的朋友可以參考下。2011-09-09
這篇文章主要為大家介紹了JS中var let聲明范圍區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
webpack4 SplitChunks實(shí)現(xiàn)代碼分隔詳解
這篇文章主要介紹了webpack4 SplitChunks實(shí)現(xiàn)代碼分隔詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
使用iframe實(shí)現(xiàn)pdf文件預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何使用iframe實(shí)現(xiàn)pdf文件預(yù)覽功能,以及iframe預(yù)覽報(bào)錯(cuò)問(wèn)題和iframe未能加載PDF文檔,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09