2011-05-13 118 views
4

這可能是我見過的最奇怪的事情之一,當無法顯示彈出框...我有元素的列表,每個包含圖標圖像和隱藏彈出框。當用戶將鼠標懸停在圖標上時,彈出框顯示在上方(jQuery的懸停)。這適用於所有瀏覽器和IE8/9,但IE7有問題。圖標和彈出框之間存在「間隙」。如果我設置了背景顏色並且彈出框的容器正在觸摸圖標行,我可以在用戶通過移動鼠標進行選擇時使彈出框顯示在屏幕上。IE7:徘徊在透明背景

不過,我不希望顯示的背景色,而當它不是,當用戶在任何地方的差距他們的移動鼠標在彈出框就會消失。換句話說,彈出窗口顯示在正確的位置,但用戶不能進行選擇,因爲沒有在沒有懸停在間隙上的情況下進入彈出窗口。

這裏的一些HTML和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!

+0

你可以創建你的代碼的[jsFiddle測試用例](http://jsfiddle.net/)嗎?確保它展示了你在IE7中討論的錯誤。 – thirtydot 2011-05-13 22:19:45

+0

在這裏做了一個 - http://jsfiddle.net/wvgcF/但不能讓它正確運行基於給出的代碼 – Lareau 2011-05-13 22:21:43

+0

我做了一個顯示我遇到的問題... http:// jsfiddle。淨/ chris7519/rGJ4g/1/ – csm232s 2011-05-14 14:25:11

回答

0

只是一個快速的一些嘗試:

將CSS規則 背景色:在包含間隙的DIV透明

(我想這會是.popup容器)。

+0

是啊,這是奇怪的事情......我嘗試過,但沒有運氣。只要背景中有顏色,它就可以工作。我從來沒有見過這個問題。 – csm232s 2011-05-14 01:55:32

2

創建一個1pixel的方形透明PNG,並將其用作元素背景。

+0

像一個迷人的作品,謝謝:-) – Jost 2013-07-18 14:58:05