<!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标悬停边框围绕效果</title> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; list-style: none; } img { border: 0; width: 300px; height: 150px; } .box { width: 300px; height: 150px; margin: 20px auto; position: relative; border: 1px solid #eee; } .box .border-left { width: 1px; height: 0px; background: black; position: absolute; left: -1px; bottom: 0; } .box .border-bottom { width: 0px; height: 1px; background: black; position: absolute; left: 0; bottom: 0px; } .box .border-top { width: 0px; height: 1px; background: black; position: absolute; right: 0; top: 0px; } .box .border-right { width: 1px; height: 0px; background: black; position: absolute; right: -1px; top: 0; } </style> </head> <body> <div class="box"> <img src="http://dev.ixincheng.com/xcview/images/xianxia_03.jpg"> <div class="border-left"></div> <div class="border-bottom"></div> <div class="border-top"></div> <div class="border-right"></div> </div> <div class="box"> <img src="http://dev.ixincheng.com/xcview/images/xianxia_03.jpg"> <div class="border-left"></div> <div class="border-bottom"></div> <div class="border-top"></div> <div class="border-right"></div> </div> <script> $(function() { var lanren_width = $('.box').width(); var lanren_height = $('.box').height(); $('.box').each(function() { $(this).hover(function() { $(this).find('.border-left,.border-right').stop().animate({ height: lanren_height + 'px' }, 400); $(this).find('.border-top,.border-bottom').stop().animate({ width: lanren_width + 'px' }, 400); }, function() { $(this).find('.border-left,.border-right').stop().animate({ height: '0' }, 400); $(this).find('.border-top,.border-bottom').stop().animate({ width: '0' }, 400); }); }); }); </script> </body> </html>
