Geek Answers Handbook

IE7: cannot display popup when hovering over transparent background

This is probably one of the strangest things I've seen ... I have a list of items, each of which contains an icon image and a hidden popup. When the user hangs over the icon, a popup appears above (jQuery hover). This works fine in all browsers and IE8 / 9, but IE7 has a problem. There is a “gap” between the icon and the popup. If I set the background color and the pop-up container touches the line of icons, I can save the pop-up on the screen when the user drags them through it with the mouse to make a selection.

However, I do not want the background color to be displayed, and when not, the pop-up window disappears when the user moves his mouse anywhere in this space. In other words, the popup is displayed in the correct position, but the user cannot make a choice because there is no way to get to the popup without hanging over the gap.

Here are some HTML and CSS:

<div class="icon-nav"> <ul> <li> <div class="popup-wrapper"> <a href="#" class="replace air" rel="air">Air Quality</a> <div class="popup-container"> <div class="popup-content"></div> </div> </div> </li> <li> <div class="popup-wrapper"> <a href="#" class="replace health" rel="health">Public Health</a> <div class="popup-container"> <div class="popup-content"></div> </div> </div> </li> Etc.... </ul> </div>

CSS

 .icon-nav { position: absolute; top: 388px; z-index: 999; width: 100%; } /* Positioned relative to a wrapper element. */ .icon-nav ul { display: block; width: 968px; margin: 0 auto; position: relative; } .icon-nav ul li { float: left; } .icon-nav ul li .popup-wrapper {} .icon-nav ul li .popup-container { position: absolute; bottom: 0px; padding-bottom: 35px; z-index: 9999; width: 100%; display:none; left: 0px; } .icon-nav ul li .popup-content { width: 900px; height: 260px; background-color: #fff; margin: 0 auto; padding:30px; } .icon-nav ul li a { width:121px; height: 115px; overflow: hidden; }

JQuery

 $('.icon-nav li .popup-wrapper').hover( function(){ $('a',this).addClass('hover') var name = $('a', this).attr('rel'); var popup = $('.popup-container', this); $(popup).css({'display':'block'}); // More Code... },function(){ $('a',this).removeClass('hover'); $('.popup-container', this).css({'display':'none'}); } );

TIA !!!

+4
source share
2 answers

Create a transparent png rectangle of 1 pixel size and use it as a background of elements.

+2
source

Just a quick try:

Define css background-color: transparent rule

in a div that contains a space (I assume it will be .popup-container).

0
source

More articles:


All Articles