时间戳

首页 > 解决方案 > Bootstrap 悬停效果在 IE 11 中未按预期工作

javascript - Bootstrap 悬停效果在 IE 11 中未按预期工作

问题描述

下面是我的div结构。我正在尝试创建大型菜单。就像当用户将鼠标悬停在button类内时dropdown，菜单将显示slideDown/slideUp效果。但最初它甚至在 chrome 中也不起作用，并且表现得像，当悬停在dropdowndiv 中的任何位置时，菜单开始向下滑动/向上滑动，

即悬停效果应用于整个 div 而不是悬停在按钮上。所以我使用display:contents了 chrome 的属性并得到了修复，但同样的修复不适用于 IE 11，因为 IE 11display:contents不支持。

<div class="row">
    <div class="dropdown">
        <button class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
            <span class="btn">Hover to see menu</span>
        </button>
        <div class="dropdown-menu">
            <!-- for responsive bootstrap grid combination will here -->
            <div class="row">
                <div class="col-sm-2 col-md-3 col-lg-2"></div>
                <div class="col-sm-2 col-md-3 col-lg-2"></div>
                <div class="col-sm-2 col-md-3 col-lg-2"></div>
            </div>
        </div>
    </div>
</div>

为了准确和清晰，我想应用悬停效果并仅当用户悬停在 div 内容内而不是整个 div 上的任何位置时才显示菜单滑动。花了将近 3 天的时间，但没有运气。

谢谢你帮助我。

标签： javascriptcsstwitter-bootstrapinternet-explorer

解决方案

推荐阅读