IE选择悬停问题
Posted
技术标签:
【中文标题】IE选择悬停问题【英文标题】：IE select issue with hover 【发布时间】：2011-04-11 18:26:53 【问题描述】：我和一个朋友正在尝试解决 IE (7/8)。我们在这里建立了一个规范的例子：
http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm
使用 CSS 菜单，我们希望在其中进行选择。但是，在 IE 中，当您与选择框交互时，菜单就会消失。我们认为这与选择如何影响事件的错误有关。
有解决方法吗？至少使用纯 CSS 或 DOM hack？
【问题讨论】：
你说的是哪个IE版本？ 我发现 IE7 和 Chrome 没有区别 edit 您需要与选择框进行交互。感谢您的帮助！ 我要说没有解决方法，因为 IE 似乎没有传播选择选项的鼠标悬停功能。我尝试了几种方法，CSS 和 javascript，但没有得到任何结果。哦，好吧，也许别人会有东西。 您是否正在寻找仅使用 CSS 和 html（无 javascript）的解决方案？ 【参考方案1】：我认为没有一种纯 CSS 方法可以解决这个问题。这是由于 IE 在选择元素上处理事件的方式存在一个非常常见的错误。
您可以使用 Javascript 解决它：
<script type="text/javascript">
$(document).ready(function ()
$('.nav_element a').mouseover(function()
$('.submenu').hide();
$(this).parent().find('.submenu').show();
);
$('.submenu').mouseover(function()
$(this).show();
);
$('.submenu').mouseout(function (e)
// Do not close if going over to a select element
if (e.target.tagName.toLowerCase() == 'select') return;
$(this).hide();
);
);
</script>
上面的代码使用了jQuery。
【讨论】：
【参考方案2】：这是一种改进 IE7/8 中选择行为的方法，但它不能解决问题
更改文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
添加脚本
<script>
function ddlOut(e)
setTimeout(function() e.className = e.className.replace(' over', ''); , 1000)
</script>
添加 CSS
#nav .over div.submenu
display: block;
#nav .nav_element
behavior: expression(
this.onmouseover = new Function("this.className += ' over'"),
this.onmouseout = new Function("ddlOut(this)"),
this.style.behavior = null
);
至少它会更好，但当然不是完美的。
我的建议是将选择控件更改为等效的 html。我使用OboutDropDown，它的视野很好。有许多实现可以满足您的需求。
【讨论】：
【参考方案3】：首先，您需要展开菜单下方的 :hover 表面。
所以在你的css中添加width:310px;height:220px到#nav .nav_element a。
（还可以在第二个 div 上添加一个类或一个 id，样式为 top:220px）
现在您只需要模拟一个 单击 触发的 mousedown，当您在选择完成时将停止该选择 - 您可能可以做最后一个如果您检查将停止鼠标按下的选择的 onfocus 状态的一部分。
【讨论】：
以上是关于IE选择悬停问题的主要内容，如果未能解决你的问题，请参考以下文章