Expand / shrink div on hover / out with jQuery

jquery html hover position
Max picture Max · Aug 21, 2012 · Viewed 41.3k times · Source

I am looking for a jQuery plugin to expand div elements so as to reveal their overflow (if any) on hover. Illustration:

enter image description here

The plugin should work on relatively positioned div's (which I guess implies that you create a copy of the div, set its positioning to absolute, then figure out where to place it).

Is there such a plugin already available out there?

Answer

Dziad Borowy picture Dziad Borowy · Aug 21, 2012

You don't need a plugin. Just add proper css and use jQuery animate: 

$div
.on('mouseenter', function(){
    $(this).animate({ margin: -10, width: "+=20", height: "+=20" });
})
.on('mouseleave', function(){
    $(this).animate({ margin: 0, width: "-=20", height: "-=20" });
})​

demo here

Related questions

show/hide a div on hover and hover out

I would like to show and hide a div during hover and hover out. here's what I've done lately. css My problem is that when I hover on the menu id, the flyout div is blinking. why is that?

Read More
jQuery: trigger a hover event from another element

When you hover over one <div>, I want an <a> on a separate part of the page to be "hovered" on also. <div class="initiator"> </div> <div> <a class="…

Read More
Adding hover CSS attributes via jQuery/Javascript

Some CSS styles need to be applied to an element on hover, and CSS styles have to be applied using javascript/jquery directly and not through stylesheets or $(this).addClass('someStyle') because I am injecting the DOM elements into another …

Read More