CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Reece
Reece

Reputation: 2711

Making a container grow on hover using jQuery

I'm trying to make a jQuery function that takes the current height and width of a link then makes it grow by whatever amount of px I set. I don't have much so far and I'm completely lost. 

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

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

});

I know how to get the current height and width but I don't know how to basically say height of .absolute_img_links = link_height + 10px in jQuery

Upvotes: 0

Views: 180

Answers (4)

Moob
Moob

Reputation: 16184

I know you asked for jQuery but...

This is trivial (and more flexible) in 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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

To achieve what you need you can pass a function to the height() and width() functions. In these functions you receive the current value, to which you can just add the 10px as required.

Note that hover() fires twice, once for mouseenter and once for mouseleave. Also, you don't reset the size of the element, so it just gets larger and larger on successive hovering. To fix this, amend your logic so that you attach the event handlers separately instead of one hover() call so you can increase/decrease the size as needed. Try this:

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

Also note that you can implement a pure CSS version of this which has the exact same effect, although simply adds padding to the right and bottom of the element, instead of changing the width/height. Try this:

.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>

Using the above method you could even keep the text centralised too, by adding a consistent 5px padding around the entire element.

Upvotes: 1

Dryden Long
Dryden Long

Reputation: 10182

Using height() and width() you can simply add 10 to the values you have found to increase the height/width of the container.

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

Upvotes: 0

tech2017
tech2017

Reputation: 1806

same functions do the job: 

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

});

Upvotes: 1

Related Questions