编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

JQ简单图片经过效果

作者:zqtsx  发布日期:2013-11-12 20:07:44
  • 收藏本文    我要投稿
  • 一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可
    错误代码如下:注意红色部分设置 (出发点就错了)

    <html>
    <head>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#box a").mouseover(function(){
        $(this).css("border","1px solid red");
      });
      $("#box a").mouseout(function(){
        $(this).css("border","none");
      });
    });
    </script>
    <style>
    #box a{ display:block; z-index:1000; width:98px; height:98px;}
    </style>
    </head>
    <body>
    <div id="box" style="width:100px; height:100px;">
    <a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a>
    <a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a>
    </div>
    </body>
    </html>
    

    修改后的正确设计思路:红色部分为调整后的设置

     

    <html>
    <head>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#box img").mouseover(function(){
        $(this).css("border","1px solid red");
      });
      $("#box img").mouseout(function(){
        $(this).css("border","none");
      });
    });
    </script>
    <style>
    #box a{ display:block; z-index:1000; width:98px; height:98px;}
    </style>
    </head>
    <body>
    <div id="box" style="width:100px; height:100px;">
    <a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a>
    <a href="#"><img src="erwm.png" border="0" width="99" height="99"/></a>
    </div>
    </body>
    </html> 
    

     

Tag标签:JQ  
  • 专题推荐