使用jQuery使容器在悬停时增长

Question

我正在尝试制作一个jQuery函数，该函数采用链接的当前高度和宽度，然后使其以我设置的任意px数增长。 到目前为止我还没有太多，我完全迷路了。

$('.absolute_img_links').hover(function(){

    var link_height = $('.absolute_img_links').outerHeight();
    var link_width = $('.absolute_img_links').width();

});

我知道如何获取当前的高度和宽度，但我不知道如何在jQuery中基本说.absolute_img_links = link_height + 10px的高度

Answer 1

相同的功能可以完成这项工作：

$('.absolute_img_links').hover(function(){

    var link_height = $('.absolute_img_links').outerHeight();
    $('.absolute_img_links').outerHeight(link_height + 10);
    var link_width = $('.absolute_img_links').width();
    $('.absolute_img_links').width(link_width + 10);

});

Answer 2

要实现所需的功能，可以将一个函数传递给height()和width()函数。 在这些函数中，您将收到当前值，您可以根据需要向其添加10px 。

请注意， hover()触发两次，一次用于mouseenter ，一次用于mouseleave 。 另外，您无需重置元素的大小，因此在连续悬停时它会变得越来越大。 要解决此问题，请修改逻辑，以便单独附加事件处理程序，而不是一个hover()调用，以便可以根据需要增加/减小大小。 尝试这个：

 $('.absolute_img_links').on('mouseenter', function(){ $(this) .height(function(i, height) { return height + 10; }) .width(function(i, width) { return width + 10; }); }).on('mouseleave', function() { $(this) .height(function(i, height) { return height - 10; }) .width(function(i, width) { return width - 10; }); }); 

 .absolute_img_links { position: absolute; background-color: #C00; color: #FFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="absolute_img_links"> Hover me! </div> 

还要注意，您可以实现一个纯CSS版本，其效果完全相同，尽管只是在元素的右侧和底部添加了padding ，而不是更改宽度/高度。 尝试这个：

 .absolute_img_links { position: absolute; background-color: #C00; color: #FFF; } .absolute_img_links:hover { padding: 0 10px 10px 0; } 

 <div class="absolute_img_links"> Hover me! </div> 

使用上述方法，您甚至可以通过在整个元素周围添加一致的5px填充来保持文本集中。

Answer 3

使用height()和width()您可以简单地将10添加到找到的值中以增加容器的高度/宽度。

 $('.absolute_img_links').hover(function() { //var link_height = $('.absolute_img_links').outerHeight(); //var link_width = $('.absolute_img_links').width(); //Changed to $(this) var link_height = $(this).outerHeight(); var link_width = $(this).width(); $(this).height(link_height + 10); $(this).width(link_width + 10); }); 

 .absolute_img_links { width: 300px; height: 300px; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="absolute_img_links"></div> 

Answer 4

我知道您要使用jQuery，但是...

这在CSS中是微不足道的（并且更加灵活）：

 .absolute_img_links img { transition: all .2s ease-in-out; } .absolute_img_links:hover img { transform: scale(1.1); } 

 <a href="#" class="absolute_img_links"><img src="https://placeimg.com/100/100/any" /></a> <a href="#" class="absolute_img_links"><img src="https://placeimg.com/100/100/any" /></a>