IE选择问题与悬停 [英] IE select issue with hover

问题描述

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

A friend and myself are trying to workaround IE (7/8). We have built a canonical example here:

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

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

Using a CSS menu, we would like to have selects in them. However, in IE, the menu goes away when you interact with the select box. We believe this has to do with a bug in how selects affect events.

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

Is there a workaround? At least with pure CSS or DOM hacks?

推荐答案

我不认为有一个纯CSS的方式。这是因为IE处理选择元素上的事件的一个非常常见的错误。

I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.

然而你可以使用Javascript解决它：

You can however work around it with 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。

The code above uses jQuery.

这篇关于IE选择问题与悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！