jquery mouseover 事件疑问解决方法
日期：2014-05-16 浏览次数：20415 次
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>
我上面写的报错，不行。
------解决方案--------------------
想实现的功能效果是
在一张图片上 鼠标移上去图片就变大，鼠标移开了 图片变回原样。大虾本请问用jquery 怎么实现。
$("#imagesid").mouseover(function(){
$(this).css{width:'500px;', height:'900px;'};
});
<a href="#"><img src="1.jpg" style="height:65px; width:132px;" id="imagesid"/></a>
我上面写的报错，不行。
------解决方案--------------------
- JScript code
<script type="text/javascript">
<!--
$(function(){
$("#imagesid").mouseover(function(){
$(this).width(500).height(900);
}).mouseout(function(){
$(this).width(132).height(65);
});
})
//-->
</script>
<a href="#"><img src="images/xu_xi_yuan[1].jpg" style="height:65px; width:132px;" id="imagesid"/></a>
------解决方案--------------------
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.a
{
width: 300px;
height: 900px;
}
img
{
height: 65px;
width: 132px;
}
</style>
<script>
$(function () {
$("#imagesid").mouseover(function () {
$(this).addClass('a');
}).mouseleave(function () {
$(this).removeClass('a');
});
})
</script>
</head>
<body>
<a href="#">
<img src="1.jpg" id="imagesid" /></a>
</body>
</html>
------解决方案--------------------
楼上给的是范例，LZ要学会变通处理。
如果你是循环出来的，每张图片的ID不同，而楼上的范例里只针对一个ID起作用。
根据需要你可以把ID部分改下
例如 1：图片都在一个id为 imgGroup 的DIV中，那么你可以改写成
$("#imgGroup img").mouseover(function(){ ------------- })
2：给每个图片加一个class
$(".class").mouseover(function(){ ------------- })
方式随个人喜欢。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
