知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    jquery鼠標滑過(經過)變色插件

    作者:佳明媽 來源:Jquery 特效 2012-02-12 人氣:
    jquery鼠標滑過(經過)變色插件說明:1、自行定義你的.hover樣式,hover樣式是必須得,具體樣式效果自行設置2、調用方法:如$.hoverPlugin.hover('#hoverulli');$.hoverPlugin.hover('#hoverdiv a');js代碼部分:
    jquery鼠標滑過(經過)變色插件說明:

    1、自行定義你的.hover樣式,hover樣式是必須得,具體樣式效果自行設置

    2、調用方法:如
    $.hoverPlugin.hover('#hoverul li');
    $.hoverPlugin.hover('#hoverdiv a');

    js代碼部分:
    <script type="text/javascript">
    $(document).ready(function(){
      jQuery.hoverPlugin = {
          //
            hover:function(hoverid) {
                //下面是變色插件的實際效果部分
                $(hoverid).hover(
                  function () {
                    $(this).addClass("hover");
                  },
                  function () {
                    $(this).removeClass("hover");
                  }
                );
                /////
            }
            //
        };
    //下面是調用方法
         $.hoverPlugin.hover('#hoverul li');
        $.hoverPlugin.hover('#hoverdiv a');
    });
    </script>

    主要的css代碼部分:
    /*.hover的樣式是必須得,具體樣式效果自行設置*/
    .hover{ background-color:#222C35; color:#FFF;}
    .hover,.hover a{color:#FFF;}

    演示html代碼部分:
    對ul中的li來實現jquery鼠標滑過變色
    <ul id="hoverul">
    <li>[<a href='http://www.ezdqdj.live/js/jquery/'>jquery 特效</a>] <a href="http://www.ezdqdj.live/js/jquery/jquery_pd1.html" title="jquery不斷的向左或者向右飄動" class="linktit">jquery不斷的向左或者向右飄動</a></li>
    <li>[<a href='http://www.ezdqdj.live/js/jquery/'>jquery 特效</a>] <a href="http://www.ezdqdj.live/js/jquery/jquery_pd2.html" title="jquery圖片左右來回循環飄動" class="linktit">jquery圖片左右來回循環飄動</a></li>
    <li>[<a href='http://www.ezdqdj.live/js/texiao/'>網頁特效</a>] <a href="http://www.ezdqdj.live/js/texiao/646.html" title="自適應寬度的html+css圖片提交按鈕代碼" class="linktit">自適應寬度的html+css圖片提交按鈕代碼</a></li>
    </ul>

    調用方法:
    $.hoverPlugin.hover('#hoverul li');

    對div中的a來實現jquery鼠標滑過變色
    <div id="hoverdiv">
    <a href="http://www.ezdqdj.live/js/slide/JQuerychajian.html"  title="JQuery圖片平滑滾動插件easyslider1.5">JQuery圖片平滑滾動插件easyslider1.5</a>
    </div>

    調用方法:如
    $.hoverPlugin.hover('#hoverdiv a');

    查看jquery鼠標滑過(經過)變色插件演示

    ↓ 查看全文

    jquery鼠標滑過(經過)變色插件由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    jquery鼠標滑過(經過)變色插件-最新評論

    老子是皇帝在线客服 北京pk10冠军技巧 稳赚包六肖三期必中一期 澳洲幸运10计划开奖结果 上证指数历史走势 托拉姆物语赚钱攻略 有双色球中奖的彩票软件 海南飞鱼游戏走势图 一天的时间怎么快速赚钱 农民种啥药能赚钱 彩名堂pk10计划软件怎么样 20选5复试计算器 500万篮彩比分 七乐彩杀号秘笈 快乐12助手官方版软件 gta5ceo和地堡那个赚钱 共享纸巾怎么赚钱新闻