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>

Jquery的

$('.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 link http://jsfiddle.net/jHeDQ/3/

Answer 1

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

$('.resize)

而不是

$('.title')

Js Fiddle

====编辑====

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

.find（）方法用于查找类.title。

的子项

Answer 2

或者您可以删除JavaScript（如果您不需要IE＆lt; = 8支持）并使用css转换，例如：

.resize .title { 
    position: relative; 
    width: 110px; 
    transition: all .3s ease-out;
    transform-origin: 50% 50%;
}
.resize:hover .title { transform: scale(1.3); }

full fiddle-example here

在悬停动画背景图像但不在顶部的文本

2 个答案: