IE选择悬停问题答案

【问题标题】：IE select issue with hoverIE选择悬停问题
【发布时间】：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）的解决方案？

标签： css internet-explorer select hover

【解决方案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 状态的一部分。

【讨论】：