晨露博客

关注互联网,关注科技,关注生活!

上一篇: 企业使用盗版软件与开源软的利与弊 下一篇:快乐周末-晨露漫画集(十三)

jquery当你的鼠标在某个网站上的某一个地方划过的时候,有时候会激发一段内容,也就是Jquery实现鼠标悬停激活效果,到底有哪些技巧呢?看看下面吧。

总体效果如下图所示:

关键代码:

当鼠标经过菜单时,它会寻找紧接着的<em>,并在上方激活它的不透明度。

$(document).ready(function(){

    $(".menu a").hover(function() {      $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");    }, function() {      $(this).next("em").animate({opacity: "hide", top: "-85"},

"fast");    });

});

您可以查看演示,或是下载源代码

小博文章如没有特殊说明均为原创,如要帮忙推广还望加上我的链接哦!
  • 本文Url: http://www.chenlublog.com/post/jquery-animated-hover.html (出自: 晨露博客)
  • 点击这里获取该日志的TrackBack引用地址

    发表评论:

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    关于本文

    您正在阅读的是:Jquery实现鼠标悬停激活效果
    morningdew 发表于:2011-6-23 12:29:48
    分类:网站建设
    关键词:jquery  

    博客作者

    Morningdew

    晨露博客

    热门文章

    最近更新

    最新评论及回复

    最近留言

    站类搜索

    博文分类

    博文归档

    Copyright ©2010 晨露博客. All Rights Reserved.网站地图  Theme Designed By TangChang
    本博客采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
    This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
    CONTACT ME:E-mail:tcmorningdew@gmail.com QQ:515667845<风荷雨莲>   津备ICP09004821   GO TO TOP

    Powered By Z-Blog 1.8 Walle Build 91204