当前位置：文江博客话题详情

IE 悬停选择问题

发布于 2024-09-19 11:12:17 字数 336 浏览 5 评论 0原文

我和一个朋友正在尝试解决 IE (7/8)。我们在这里构建了一个规范示例：

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

欲拥i 2024-09-26 11:12:18

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

不过，您可以使用 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。

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 原文

陌生 2024-09-26 11:12:18

这是一种改进 IE7/8 中选择行为的方法，但它不能解决问题

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

它会起作用至少更好，但当然并不完美。

我的建议是将选择控件更改为 html 等效控件。我使用 OboutDropDown ，它的视图很好。有许多实现可以满足您的需求。

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 原文