jquery - 悬停时动画背景图像而不是顶部的文本

Question

我在某些时候有点卡住了。所以将鼠标悬停在背景图像上会变大。但是如果我在该图像上放一个文本，那么动画就不会很好地工作。让我给你看我的代码

HTML

<div class="resize">
    <a id="apply" href="" target="_blank">
        <!--<h1 class="grow">Search & Apply</h1>-->
        <img class="title" src="images/search_inactive1.png">
    </a>
</div>

查询

$('.title').hover(function(){
    $(this).animate({ width: "+=40",height: "+=40",top: "-=20",left: "-=20"}, 130);                             
}, 
function(){
    $(this).animate({ width: "-=40",height: "-=40",top: "+=20",left: "+=20"}, 200);                      
}); 

CSS

.resize img {
    position: relative;
    width: 110px;
}

有什么方法可以告诉 jquery 不要为文本设置动画，而只为背景图片设置动画。

提前致谢。

JSfiddle 链接 http://jsfiddle.net/jHeDQ/3/

Answer 1

将选择器设置在容器上，而不是单独设置图像，因为文本位于它上面，

$('.resize)

代替

$('.title')

Js Fiddle

====编辑====

为了进一步说明，使用了 .stop() 方法以避免每次鼠标进入和退出时播放动画，从而导致动画“损坏”。

.find() 方法用于查找具有 .title 类的 child 。