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大小

回答

相关问题