IE选择悬停问题

2022-01-22 00:00:00 select internet-explorer hover css

我和一个朋友正在尝试解决 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/分享/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 hack?

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.

相关文章