IE7 : 투명 배경 위에 마우스를 올려 놓을 때 팝업 상자를 표시 할 수 없음

Question

이것은 내가 본 이상한 것 중 하나입니다. 요소 목록이 있고 아이콘 이미지와 숨겨진 팝업 상자가 있습니다 . 사용자가 아이콘 위로 마우스를 가져 가면 팝업 상자가 위에 표시됩니다 (jQuery의 가리개). 이것은 모든 브라우저와 IE8/9에서 잘 작동하지만 IE7에는 문제가 있습니다. 아이콘과 팝업 상자 사이에는 '간격'이 있습니다. 배경색을 설정하고 팝업 상자의 컨테이너가 아이콘 행을 터치하면 사용자가 마우스를 움직여 선택할 때 팝업 상자가 화면에 계속 표시됩니다.

그러나 배경색을 표시하고 싶지는 않습니다. 그렇지 않은 경우 사용자가 마우스를 해당 간격 내에서 아무 곳이나 움직이면 팝업 상자가 사라집니다. 즉, 팝업은 올바른 위치에 표시되지만 사용자는 갭을 넘기지 않고 팝업을 얻을 수있는 방법이 없기 때문에 선택할 수 없습니다.

<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를 :

여기에 일부 HTML 및 CSS에게의

$('.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를! 그냥 빨리 뭔가

Answer 1

이 시도 :

CSS 규칙을 설정 배경 색상 : 간격을 포함 사업부에

투명을 (난 그 .popup 컨테이너 것 같아요).

Answer 2

1 픽셀 크기의 투명한 PNG를 만들어 요소 배경으로 사용하십시오.