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

【问题标题】：Expand an image or background when div is hovered当 div 悬停时展开图像或背景
【发布时间】：2012-11-26 10:29:59
【问题描述】：

当 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
    });
});

【问题讨论】：

@VladimirStarkov jsfiddle.net/AVyQc/1 但它没有在两边均匀扩展，并且当另一个图像悬停时扩展不会激活。请帮忙

标签： jquery css mouseover

【解决方案1】：

这是一个非常基本的语法示例和working example。

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

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

【讨论】：

【解决方案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/

【讨论】：

什么会使实际的背景图像像这样展开？
我更新了小提琴，让它按照你的需要工作 - jsfiddle.net/AVyQc/5 在 CSS 中，在 div: hover 你给它更大的尺寸，当悬停时，它会增加尺寸从普通 div 上的设置尺寸到新的悬停尺寸。过渡 CSS3 效果使过程动画化。
有没有办法让触发 div 在展开的 div 中而不是自身展开？
我认为只要把 div 放在里面就可以了，但是给触发器 div 一个固定的宽度和高度
请看我的更新，我已经修改了它，但进展并不顺利jsfiddle.net/AVyQc/6

【解决方案3】：

使用 CSS3，您可以在从一种样式更改为另一种样式时添加效果，而无需使用 Flash 动画或 JavaScript，并且仅使用 纯 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;
}

【讨论】：

这很好，但我已经尝试过了，实际的背景图像本身需要扩展。什么会导致这种情况发生？ @Shailender