IE select issue with hover

问题

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

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.

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

回答1:

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.

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>

The code above uses jQuery.

回答2:

Here is a way to improver select behavior in IE7/8, but it does not fix the issue

Change DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Add script

<script>

    function ddlOut(e) {
        setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000)
    }

</script>

Add 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
        );
    }

It will work better at least but of course not perfect.

My advice is to change select control to html equivalent. I use OboutDropDown that has a nice view. There are many implementations that can suite you needs.

回答3:

First you need to expand the :hover surface underneath your menu.
So in your css add width:310px;height:220px to #nav .nav_element a.
(also add a class or an id on the second div styled with top:220px)

Now you just need to simulate a mousedown triggered when you click on the select which will halt when the selection between the options is done - you can probably do the last part if you check for the onfocus state of the select which will stop the mousedown.

来源：https://stackoverflow.com/questions/3702354/ie-select-issue-with-hover

标签

css

internet-explorer

select

hover