Question

朋友和我正在尝试解决IE（7/8）。我们在这里建立了一个规范的例子：

http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm

使用CSS菜单，我们希望在其中选择。但是，在IE中，当您与选择框进行交互时，菜单会消失。我们认为这与选择如何影响事件的错误有关。

有解决方法吗？至少使用纯CSS或DOM黑客？

Answer 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。

Answer 2

这是一种在IE7 / 8中改进选择行为的方法，但它不能解决问题

更改DOCTYPE

<!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看得很清楚。有许多实现可以满足您的需求。

Answer 3

首先，您需要在菜单下方展开：悬停曲面因此，在您的CSS中，将width:310px;height:220px添加到#nav .nav_element a （还在用top:220px设置的第二个div上添加一个类或一个id）

现在你只需要模拟点击时触发的 mousedown ，当选项之间的选择完成时，它会停止 - 你可以做到最后部分如果您检查选择的 onfocus 状态将停止mousedown。

IE选择悬停问题

3 个答案: