JQuery在懸停時增加div大小

當用戶懸停div時，此div增加大小。但是當用戶從這個div中移除光標時如何減小大小。JQuery在懸停時增加div大小

var hoveredDiv; 
     $('.promoContent').hover(function() { 
      hoveredDiv = $(this).attr('id'); 
      $('#' + hoveredDiv).animate({height: '100%'}); 
     });

來源

2015-08-31 qr11

使用，'$（選擇）.mouseenter（{...}）。 mouseleave（{...}）;' –

謝謝。有用。 – qr11

爲什麼你會在這個簡單的懸停情況下使用js而不是css？爲什麼在地獄你得到元素的ID再次選擇它？ –

您可以使用

的.hover（）方法結合處理兩種的mouseenter和鼠標離開事件。當鼠標位於元素內時，您可以使用它在期間將行爲簡單應用到元素。

$('.promoContent').hover(function() { 
    $(this).animate({height: '100%'}); 
},function(){ 
     $(this).animate({height: '50%'}); 
});

來源

2015-08-31 22:35:45 LTasty

您也可以使用鼠標懸停及移出事件。

http://jsfiddle.net/xno5hb34/1/

<button class="promoContent" id="hoveredDiv" style="width:30%; height: 60%; background-color: red">MouseOverToIncreaseSize</button> 

var hoveredDiv; 
    $('.promoContent').mouseover(function() { 
     hoveredDiv = $(this).attr('id'); 
     $('#' + hoveredDiv).animate({ height: (parseInt($('#' + hoveredDiv).css("height").trim('px')) * 2) + "px" }); 
    }); 

    $('.promoContent').mouseout(function() { 
     hoveredDiv = $(this).attr('id'); 
     $('#' + hoveredDiv).animate({ height: (parseInt($('#' + hoveredDiv).css("height").trim('px'))/2) + "px" }); 
    });

來源

2015-08-31 22:44:16 DinoMyte

var hoveredDiv; 
    $('.promoContent').hover(function() { 
     hoveredDiv = $(this).attr('id'); 
     $('#' + hoveredDiv).animate({"height": "100%"}); 
    });

$（ '＃' + hoveredDiv）.animate（{ 「高度」：「100％」}）;

只需添加雙qute（「」）

「高度」：「100％」

來源

2015-08-31 23:14:53

JQuery在懸停時增加div大小

回答

相關問題