代码之家 › 专栏 › 技术社区 › MathGladiator

IE选择悬停问题

hover select internet-explorer css

MathGladiator · 技术社区 · 15 年前

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

有解决办法吗?至少是纯CSS或DOM黑客?

3 回复 | 直到 15 年前

vassilis 15 年前

我不认为有一个纯粹的CSS方法来解决这个问题。这是由于IE处理选定元素上事件的方式有一个非常常见的错误。

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

Pavlo Neiman 15 年前

更改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
        );
    }

它至少会工作得更好,但当然不是完美的。

我的建议是将select控件更改为html等效控件。我用 OboutDropDown 那风景不错。有许多实现可以满足您的需要。