當div懸停時展開圖像或背景

-1

當div懸停時，我需要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 
    }); 
});

來源

2012-11-26 Woolley

@VladimirStarkov http://jsfiddle.net/AVyQc/1/但它沒有均勻擴展eitherside，並且當其他圖像被徘徊時擴展未被激活。請幫助 – Woolley

這是一個非常基本的語法示例和working example。

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

我強烈建議閱讀關於在JQuery API中的animate function並探索框架的功能。

來源

2012-11-26 10:36:50

非常簡單的做法！ 您可以使用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/

來源

2012-11-26 10:37:30 BrownEyes

什麼可以使實際的背景圖像像這樣展開？ – Woolley

我更新了小提琴，使其工作正如你需要它 - http://jsfiddle.net/AVyQc/5/ 在CSS中，在div：懸停你給它更大的尺寸，當它徘徊，它會將尺寸從正常div的設置尺寸增加到新的懸停尺寸。過渡CSS3效果爲該過程提供動畫。 – BrownEyes

有沒有辦法讓擴展div內的觸發div但不能擴展自己？ – Woolley

隨着CSS3，您可以在從一種樣式更改爲另一種時添加效果，而不使用Flash動畫或JavaScript並僅使用pure 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; 
}

來源

2012-11-26 10:40:26

這是偉大的，但我已經嘗試過，實際的背景圖像本身需要擴大。什麼會使這發生？ @Shailender – Woolley

當div懸停時展開圖像或背景

回答

相關問題