日期:2014-05-16  浏览次数:20309 次

求教jquery的hover事件触发问题
先贴下代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$(".box").hover(function() {
$(".box div").stop().slideDown();
}, function() {
$(".box div").stop().slideUp();
});
</script>
<div class="box">
<img src="http://placehold.it/280x210/2efff3" alt="">
<div>
<h4>标题</h4>
<p>标题描述</p>
</div>
</div>
<div class="box">
<img src="http://placehold.it/280x210/2efff3" alt="">
<div>
<h4>标题</h4>
<p>标题描述</p>
</div>
</div>

</body>
</html>

问题是这样的,当鼠标进入第一个DIV元素的时候图片上的文字层有一个slideDown的效果,但是第二个也会同时触发,如果想要不连带其他相同元素触发事件应该怎么改?
------解决方案--------------------
$(".box div").stop().slideDown();

=>

$(this).find('div').stop().slideDown();