鼠标放上去会变化
Posted 不积跬步无以至千里不积小流无以成江海
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标放上去会变化相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { width:50px;height:50px;display:block;text-decoration: none;margin:100px auto; } .sp1 { display:block; } .sp1 img { width:100%; display:block; /* img标签有个3px的bug,如果不加这个句话，会有bug ,测试一下就知道了 */ } .sp2 { display:none;width:50px;height:50px;background-color: #f39800;color:#fff;text-align:center;line-height: 50px; } </style> </head> <body> <a href="http://www.baidu.com" target="_blank"> <span class="sp1"> <img src="lapin.png" alt=""> </span> <span class="sp2"> 辣品 </span> </a> </body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(document).ready(function(){ $(\'a\').hover(function(){ $(this).find(".sp2").css("display","block"); $(this).find(\'.sp1\').css(\'display\',\'none\'); },function(){ $(this).find(\'.sp1\').css(\'display\',\'block\'); $(this).find(\'.sp2\').css(\'display\',\'none\'); }) }) </script> </html>
以上是关于鼠标放上去会变化的主要内容，如果未能解决你的问题，请参考以下文章