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()调用，以便根据需要增加/减小大小。试试这个：

＆＃13;

$('.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; });
});

＆＃13;

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

＆＃13;

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

＆＃13;

另请注意，您可以实现具有完全相同效果的纯CSS版本，但只需在元素的右侧和底部添加padding，而不是更改宽度/高度。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

使用上述方法，您甚至可以通过在整个元素周围添加一致的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>

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

4 个答案: