div触发事件的热点问题
如题：
现在我有一个<div>，<div>内部包含一个<img>。此为背景。
我想要实现的效果是，写一个div的hover事件，当鼠标移动到div上时这个div做一个变形的动画，
再写一个mouseout事件，当鼠标移出div时这个div变回去。
现在发现一个问题，就是当我将鼠标移动到div内部时，会触发div的hover事件，在事件未完成前如果鼠标碰到了div中的img上，
会触发div的mouseout事件。
难道div和它内部的img不是一体的么？
改怎样写呢？难道要把div内部的所有标签元素都绑定到那个div的事件么。
如果我的div中有很多元素那岂不是非常麻烦，有没有什么简单的方法呢？
现在代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>try22</title>
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").hover(function(){
$(this).stop().animate({"width":500},"slow");
});
$("div").mouseout(function(){
$(this).stop().animate({"width":300},"slow");
});
});
</script>
</head>
<body>
<div style="width:300px;height:200px;background-color:#000000;margin-left:0px;position:absolute"><img src="pic/cry.gif" /></div>
</body>
</html>
$(document).ready(function(){
$("div").hover(
function(){
$(this).stop().animate({"width":500},"slow");
},
function(){
$(this).stop().animate({"width":300},"slow");
}
);
});
hover(over, out)；over函数表示mouseover out表示mouseout 不需要再定义mouseout
典型的js事件冒泡
哥们我改你的dmeo。
你测试下，我这边OK了。
[code="html"]
又白忙了。。差一分钟。。。。
按理说是要判断从属关系的，不过jquery已经解决了hover这个问题