使用mouse事件實現(xiàn)簡單的鼠標經(jīng)過特效
更新時間:2015年01月30日 10:33:10 投稿:hebedich
這篇文章主要介紹了使用mouse事件實現(xiàn)簡單的鼠標經(jīng)過特效的方法,需要的朋友可以參考下
代碼超級簡單,這里就不多BB了,直接奉上
復制代碼 代碼如下:
<!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>鼠標經(jīng)過下面的塊</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>
非常簡單的代碼,小伙伴們參考下,自由擴展,希望大家能夠喜歡。
您可能感興趣的文章:
- 兼容ie和firefox的鼠標經(jīng)過(onmouseover和onmouseout)實現(xiàn)--簡短版
- js實現(xiàn)圖片顯示局部,鼠標經(jīng)過顯示全部的效果
- Javascript實現(xiàn)的鼠標經(jīng)過時播放聲音
- 鼠標經(jīng)過導航菜單時顏色改變效果
- javascript學習筆記(二) 鼠標經(jīng)過時,改變div塊的背景色的代碼
- javascript中onmouse事件在div中失效問題的解決方法
- jquery插件實現(xiàn)鼠標經(jīng)過圖片右側顯示大圖的效果(類似淘寶)
- 鼠標經(jīng)過顯示二級菜單js特效
- CSS鼠標響應事件經(jīng)過、移動、點擊示例介紹
- jquery左右滾動焦點圖banner圖片鼠標經(jīng)過顯示上下頁按鈕
- jquery給圖片添加鼠標經(jīng)過時的邊框效果
- jquery簡單實現(xiàn)鼠標經(jīng)過導航條改變背景圖
- 鼠標經(jīng)過tr時,改變tr當前背景顏色
- Jquery中國地圖熱點效果-鼠標經(jīng)過彈出提示層信息的簡單實例
- jq實現(xiàn)酷炫的鼠標經(jīng)過圖片翻滾效果
- jQuery 鼠標經(jīng)過(hover)事件的延時處理示例
相關文章
獲取當前網(wǎng)頁document.url location.href區(qū)別總結
請教:document.URL和window.location.href區(qū)別2008-05-05BootStrap表單控件之復選框checkbox和單選擇按鈕radio
這篇文章主要介紹了BootStrap表單控件之復選框checkbox和單選擇按鈕radio的相關資料,需要的朋友可以參考下2017-05-05JavaScript實現(xiàn)簡易輪播圖最全代碼解析(ES5)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易輪播圖最全代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09