jquery mouseover 事件疑问

想实现的功能效果是在一张图片上 鼠标移上去图片就变大，鼠标移开了 图片变回原样。大虾本请问用jquery 怎么实现。$("#imagesid").mouseover(function(){
    $(this).css{width:'500px;', height:'900px;'};
}); <a href="#"><img src="1.jpg" style="height:65px; width:132px;" id="imagesid"/></a>我上面写的报错，不行。

解决方案 »

  1.   

    $("#imagesid").mouseover(function(){
      $(this).css{"width":"500px;", "height":"900px;"};
    });
      

  2.   

    <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript">
    function test(){
    var test = document.getElementById("test");
    test.style.width = "500px";
    test.style.height = "500px";
    };
    function test2(){
    var test = document.getElementById("test");
    test.style.width = "50px";
    test.style.height = "50px";
    };
    </script>
      </head>
      
      <body>
        <img id="test" src="pic/2.jpg" onmouseover="test();" style="width: 50px; height: 50px" onmouseout="test2()"/>
      </body>
    </html>
      

  3.   


    <html> 
    <head> 
    <script src="jquery.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script>$(document).ready(function(){
    $("#imagesid").mouseover(function(){
    $(this).data('oldwidth',$(this).css('width'));
    $(this).data('oldheight',$(this).css('height'));

    $(this).css('width','500px');
    $(this).css('height','900px');
    });
    $("#imagesid").mouseout(function(){
    var width = $(this).data('oldwidth');
    var height = $(this).data('oldheight');

    $(this).css('width',width);
    $(this).css('height',height);
    });
    });
    </script>
    </head> <body> <div  style="height:65px; width:132px;" id="imagesid">
    <a href="#"><img src="1.jpg" style="height:100%;width:100%"/></a>
    </div></table>
    </body> 
    </html> 
      

  4.   


    <html> 
    <head> 
    <script src="jquery.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script>$(document).ready(function(){
    $("#imagesid").mouseover(function(){
    $(this).data('oldwidth',$(this).css('width'));
    $(this).data('oldheight',$(this).css('height'));

    $(this).css('width','500px');
    $(this).css('height','900px');
    });
    $("#imagesid").mouseout(function(){
    var width = $(this).data('oldwidth');
    var height = $(this).data('oldheight');

    $(this).css('width',width);
    $(this).css('height',height);
    });
    });
    </script>
    </head> <body> <div  style="height:65px; width:132px;" id="imagesid">
    <a href="#"><img src="1.jpg" style="height:100%;width:100%"/></a>
    </div></table>
    </body> 
    </html> 
      

  5.   

    $("#imagesid").mouseover(function(){
       $("#imagesid").css("width","500px","height","900px");
    });  
    });或者：$("#imagesid").mouseover(function(){
       $("#imagesid").css({"width":"500px","height":"900px"});
    });  
    });