Jquery鼠标悬停按钮图标动态变化效果
Posted 北漂阿猫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery鼠标悬停按钮图标动态变化效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery仿淘宝icon动画图标特效</title> </head> <style type="text/css"> *{padding: 0;margin: 0;} #move{ margin: 40px auto; width: 298px; height: 174px; border: 1px solid #ccc; background-color: #F0F0F0;} #move a{ display: inline-block; width: 58px; height: 25px; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; text-align: center; margin: 10px 17px; position: relative; padding-top: 40px; color: #9c9c9c; font-size: 12px; text-decoration: none; line-height: 25px; overflow: hidden; } #move a i{ position: absolute; top: 12px; left: 0; display: inline-block; width: 100%; text-align: center; filter:alpha(opacity=100); opacity: 1; } #move a:hover{ color: #f00; } #move img{ border:none; width: 50%; } </style> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(\'#move a\').mouseenter(function(){ $(this).find("i").animate({top:\'-25px\',opacity:\'0\'},300,function(){ $(this).css({top:\'25px\'}); $(this).animate({top:\'12px\',opacity:\'1\'},600) }); }) }) </script> <body> <div id="move"> <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu2.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu3.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu4.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a> <a href="#"><i><img src="images/zhu2.png"></i><p>租房</p></a> </div> </body> </html>
以上是关于Jquery鼠标悬停按钮图标动态变化效果的主要内容，如果未能解决你的问题，请参考以下文章