这是一个仅限IE的问题.您可以在这里看到问题(死链接)与IE(等待页面加载,并将NY Times图标悬停在左下角的工具栏中.然后尝试选择一个新选项).布局：.toolTip在它的父div悬停时变得可见. .toolTip里面是一个选择框.当用户打开选择框进行选择时,父元素将被隐藏.
为什么IE认为当我将鼠标悬停在选择框上时,我不再在父div上了？
以下是一些相关代码(为清晰起见而减少)：
#toolBar .toolTip {
position: absolute;
display:none;
background: #fff;
min-width: 300px;
}
#toolBar .socialIcon:hover .toolTip {
display:block;
}
和
<div id="toolBar">
<div class="socialIcon">
<span class="toolTip">
<h1>NY Times Bestsellers Lists</h1>
<div id="nyTimesBestsellers">
<?PHP include('/ny-times-bestseller-Feed.PHP') ?>
</div>
<p>
<select id="nyTimesChangeCurrentList" name="nyTimesChangeCurrentList">
<option value="hardcover-fiction">Hardcover Fiction</option>
<option value="hardcover-nonfiction">Hardcover Nonfiction</option>
<option value="hardcover-advice">Hardcover Advice</option>
</select>
</p>
</span>
</div>
</div>
我试过的
解决方法
通过添加< a href =“#”class =“closeParentBox”> close< / a>解决了这个问题.到.toolTip div和
<!--[if IE]>
<script type="text/javascript">
jQuery(function($){
$('.toolTip select').focus(function(){
$(this).parents('.toolTip').addClass('keepOpen');
});
$('.toolTip select').blur(function(){
$(this).parents('.toolTip').removeClass('keepOpen');
});
$("a.closeParentBox").click(function(){
$(this).parents('.toolTip').fadeOut();
return false;
});
});
</script>
<![endif]-->
不漂亮……但是我很想听到更好的答案.
