Geek Answers Handbook

How to show overlay div when hovering over div with jQuery?

I want to show an overlay div sitting on top of a hovering div similar to this effect on the IBM website: http://www.ibm.com/us/en/

Look at the 3 windows next to the footer. Hover over the field “Let them build a smart planet” to see the effect.

+4
source share
3 answers

I created a working working example . Basically you need to create 3 divs with visible and invisible containers, add a hover event handler and switch the tooltip visibility in this handler.

HTML:

<div class="parents"> <div class="box type-1">box 1</div> <div class="tooltip type-1">tooltip 1</div> </div> <div class="parents"> <div class="box type-2">box 2</div> <div class="tooltip type-2">tooltip 2</div> </div> <div class="parents"> <div class="box type-3">box 3</div> <div class="tooltip type-3">tooltip 3</div> </div>

CSS

 .parents { float: left; margin: 5px; } .box, .tooltip { width: 80px; height: 30px; line-height: 30px; background-color: #666; color: #fff; border: 1px solid #222; text-align: center; } .tooltip { display: none; position: absolute; top: 50px; }

JQuery Code:

 $(document).ready ( function () { // add hover event handler $('.box').hover ( function () { // find the triggering box parent, and it tooltip child $(this).parent().children('.tooltip').animate ( { opacity: "toggle", // toggle opacity } ); } ); } );
+7
source

IBM uses the Dojo.expand method. You can do the same functionality in jQuery using the expand plugin.

+3
source

You can do it easily. These steps must be performed:

1) Have 3 blocks, such as DIV or UL LI, and add a hidden container inside (or it doesn't matter if you set the position using jQuery. If your structure is:

 <div class="block"> <div class="invisible"></div> <div class="visible"></div> </div>

2) Attach the mouseenter and mouseleave events to all 3 blocks, for example:

 $('.block').mouseenter(function() { // some code to show the hidden container $(this).find('.visible').show().addClass('visible_container'); }); $('.block').mouseleave(function() { // some other code to hide the shown container $('.visible_container').hide(); // Hide all the instances of .visible_container });

3) . You should change the JS or CSS according to the position methods for your elements, so when show() is called, the element will be displayed directly above the element. For example, if a hidden block has a CSS position: absolute rule, you should use:

 $(this).find('.visible') .show() .addClass('visible_container') .css('top', $(this).offset().top+'px') .css('left', $(this).offset().left+'px');

In this case, the container shown will be set to the upper right corner of the hanging block.

Since the hidden container is a child of the block container, the mouseleave event will not be raised, so it will display well.

+2
source

More articles:


All Articles