IE select issue with hover

2019-04-06 16:41发布

站内问答 / HTML/CSS
367 3 6

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?

3条回答
傲
2楼-- · 2019-04-06 17:05

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.

查看更多
0人赞 添加讨论(0) 举报
一纸荒年 Trace。
3楼-- · 2019-04-06 17:13

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.

查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
4楼-- · 2019-04-06 17:24

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)