Question

当div悬停时，我需要一个div背景图像来扩展。最好的方法是什么？

它需要是一个流畅的动画。理想情况下我想使用JQuery，但我对编码很新，所以是否有可以使用的现成代码？

我刚刚创建了这个代码，而且它可以实现一个条件！我希望它有所帮助

<img class="wooll" src="/images1" style="position: absolute; margin: 0 0 0 20px;" />

<img  style="" src="/images2" class="grow"/>


$(".wooll, .grow").hover(function() {
   $('.grow').animate({
        'height': $(this).height() * 1.4,
        'width': $(this).width() * 1.4
    });
}, function() {
    $('wool, .grow').animate({
        'height': $(this).height() / 1,
        'width': $(this).width() / 1
    });
});

Answer 1

以下是语法和working example的基本示例。

$("#mydiv").mouseover(function(){
    $("#mydiv").animate({width: '200', height: '200'},200);
});

我强烈建议您阅读JQuery API中的animate function并探索框架的功能。

Answer 2

非常简单的方法！ 您可以使用CSS3进行平滑过渡，只需将其应用于css中的背景：

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;

然后是悬停

div:hover .background {
background-size: cover /* or you can use width/height */
}

JSFiddle上的工作示例：http://jsfiddle.net/AVyQc/3/

Answer 3

使用 CSS3 ，您可以在从一种样式更改为另一种样式时添加效果，而无需使用Flash动画或JavaScripts，并且仅使用纯CSS 。

请参阅演示： - DEMO1

请参阅演示： - DEMO2

我希望这会对你有所帮助

<强> HTML

<div>
</div>

<强> CSS

div {
width:100px;
height:100px;
background:red;
}
div:hover {
width:200px;
height:200px;
background:yellow;
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

当div悬停时展开图像或背景

3 个答案: