Question

我有一个菜单＆＃34;打开＆＃34;当有人悬停某个导航项目时。通过＆＃34;开放＆＃34;它，它只是添加或删除了类＆＃34;隐藏＆＃34;使用jQuery .hidden只是可见性：隐藏。为了使其显示在主要欢迎图像的顶部（菜单是透明的并且完全覆盖标题图像的空间），它相对位于0px乘0px参考div内。

JQUERY：

$(document).ready(function() {
    $("#products_open_link").mouseenter(function(event) {
        $("#products_menu").css("width",$("#header_img").width());
        $("#products_menu").css("height",$("#header_img").height());
        $("#products_menu").removeClass("hidden");
    });
    $("#products_open_link").mouseleave(function(event) {
        if ($('#products_menu').is(':hover')) {
            $("#products_menu").mouseleave(function(event) {
                $("#products_menu").addClass("hidden");
            });
        }
        else {
            $("#products_menu").addClass("hidden");
        };
    });
});

HTML：

<div id="reference_point" style="max-width:0px;max-height:0px;">
    <div id="products_menu" class="hidden part_of_menu hidden-xs hidden-sm">
        <div class="products_menu_padding">
            <div class="row">
                <div class="col-md-3">
                    <ul>
                        <strong>Metal Forming</strong>
                        <li><a href="#">Stamping</a></li>
                        <li><a href="#">Wire &amp; Tube</a></li>
                        <li><a href="#">Coin-Pierce-Trim</a></li>
                        <li><a href="#">Fasteners &amp; Rivets</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <ul>
                        <strong>Welding</strong>
                        <li><a href="#">Resistance</a></li>
                        <li><a href="#">MIG</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <ul>
                        <strong>Coating</strong>
                        <li><a href="#">Powder</a></li>
                        <li><a href="#">E-Coating</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <ul>
                        <strong><a href="#">Prototype/Short Order</a></strong>
                        <strong><a href="#">Quality</a></strong>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <img src="img/header_2.jpg" class="img-responsive" id="header_img">
</div>

在Chrome和FF中运行良好。在IE中，它出现并且所有但是头部图像向下移位，如200px。所以透明菜单应该是它应该的位置，但它会导致标题图像向下移动，这也使菜单不覆盖标题图像。我是js / jQuery的新手，所以它可能会很混乱，但它会做它应该做的事情。我只是想知道如何修复它搞乱IE浏览器。

Here is how it looks in IE

Here is how it looks in Chrome/FF

相对定位的悬停菜单在Chrome / FF中运行，在IE

0 个答案: