【发布时间】: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!!!
【问题讨论】:
-
您可以为您的代码创建一个jsFiddle test case 吗?确保它显示出您在 IE7 中谈论的错误。
-
在这里制作了一个 - jsfiddle.net/wvgcF 但根据给出的代码无法让它正常运行
-
我做了一个显示我遇到的问题...jsfiddle.net/chris7519/rGJ4g/1
-
只改变背景颜色(除了透明)解决了这个问题,但我需要有一个差距:jsfiddle.net/chris7519/rGJ4g/2
标签: javascript jquery css internet-explorer internet-explorer-7