基于hover的用法實例(推薦)
更新時間:2017年07月04日 08:30:37 投稿:jingxian
下面小編就為大家?guī)硪黄趆over的用法實例(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
//hover,鼠標移入移出的另一種用法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>左導(dǎo)航特效</title> <style type="text/css"> * { margin: 0px; padding: 0px; font-size: 12px; } #nav .navsBox { width: 160px; } #nav .navsBox .firstNav { height:45px; line-height:45px; background-color:#EBEBEB; border-left:10px solid #FE705C; padding-left:20px; width:130px; font-weight:bold; cursor: pointer; } #nav .navsBox ul { display:none; list-style:none; } #nav .navsBox ul li { display:block; height:45px; line-height:45px; padding-left:70px; width:90px; background-color:#F2F2F2; background-position:33px 7px; background-repeat:no-repeat; } #nav .navsBox ul li.jedh { background-image:url("./images/huan.gif"); } #nav .navsBox ul li.jlbbyk { background-image:url("./images/you.gif"); } #nav .navsBox ul li.jwljb { background-image:url("./images/gouwu.gif"); } #nav .navsBox ul li.mrljb { background-image:url("./images/meiri.gif"); } #nav .navsBox ul li.vipjtj { background-image:url("./images/zhe.gif"); } #nav .navsBox ul li.onbg { background-color:#F9DBD1; } #nav .navsBox ul li a { color:#000; text-decoration:none; } </style> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function () { $(".firstNav").click(function () { var $ul= $(this).next(); if($ul.is(":visible")){ $ul.hide(); }else{ $ul.show(); $ul.children().hover(function () { $(this).addClass("onbg"); },function () { $(this).removeClass("onbg") }) } }) }) </script> </head> <body> <div id="nav"> <div class="navsBox"> <div class="firstNav">購物特權(quán)</div> <ul> <li class="jedh"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >全額兌換</a></li> <li class="jlbbyk"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >俱樂部包郵卡</a></li> <li class="jwljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >購物領(lǐng)金幣</a></li> <li class="mrljb"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >每日領(lǐng)金幣</a></li> <li class="vipjtj"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >VIP階梯價</a></li> </ul> </div> </div> </body> </html>
以上這篇基于hover的用法實例(推薦)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Jquery的hover方法讓鼠標經(jīng)過li時背景變色
鼠標經(jīng)過時讓li背景變色,在某些時候還是挺實用的,下面為大家介紹下使用Jquery的hover方法來實現(xiàn)下,感興趣的朋友可以參考下2013-09-09jquery的Theme和Theme Switcher使用小結(jié)
jquery的Theme和Theme Switcher使用總結(jié),學(xué)習jquery Theme的朋友可以參考下。2010-09-09基于 jQuery 實現(xiàn)鍵盤事件監(jiān)聽控件
這篇文章主要介紹了基于 jQuery 的鍵盤事件監(jiān)聽控件,需要的朋友可以參考下2019-04-04