【问题标题】:IE7: Can't display popup box when hovering over transparent backgroundIE7:悬停在透明背景上时无法显示弹出框
【发布时间】:2011-08-25 07:01:52
【问题描述】:

这可能是我见过的最奇怪的事情之一......我有一个元素列表,每个元素都包含一个图标图像和一个隐藏的弹出框。当用户将鼠标悬停在图标上时,弹出框会显示在上方(jQuery 的悬停)。这在所有浏览器和 IE8/9 中都可以正常工作,但 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!!!

【问题讨论】:

标签: javascript jquery css internet-explorer internet-explorer-7


【解决方案1】:

只是一个快速的尝试:

设置css规则 背景色:透明

在包含间隙的 div 上(我猜应该是 .popup-container)。

【讨论】:

  • 是的,这很奇怪……我试过了,但没有运气。只要背景中有颜色,它就可以工作。我以前从未见过这个问题。
【解决方案2】:

创建一个 1 像素方形透明 png,并将其用作元素背景。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-02-21
    • 1970-01-01
    • 1970-01-01
    • 2017-03-20
    • 2015-03-07
    • 2014-06-21
    • 1970-01-01
    • 2012-12-05
    相关资源
    最近更新 更多