JQuery .hover（）不工作在IE7或兼容性模式的每个版本的IE [英] JQuery .hover() not working in IE7 or compatability mode for each version of IE

问题描述

我正在建立一个菜单，允许用户将鼠标悬停在指定主题上，并且菜单下拉以显示不同选项的数组。

I'm building a menu that allows the user to hover over the given topic, and a menu drops down to reveal an array of different options.

一切正常在Safari，Chrome，Firefox，Opera，IE9 - IE8（非兼容性视图），但是IE7做的很奇怪。

Everything works fine in Safari, Chrome, Firefox, Opera, IE9 - IE8 (non-compatability view), but IE7 is doing something weird.

这：

<div id="menu_container">
<div id="menu_collapse">
    <div id="menu">
        <div id="home_button">
            </div>
                <ul>
                    <li>Television</li>
                    <li>Radio</li>
                    <li>Get Involved</li>
                    <li>Non-Profit Services</li>
                    <li>Education</li>
                    <li>Donate</li>
                    <li>Extra</li>
                </ul>
            </div>
            <div id="search_menu">
                <div id="socialcons">
                    <img src="css/img/twitter.jpg">
                    <img src="css/img/facebook.jpg">
                </div>
                <input type="text" name="search">
                <button></button>
            </div>
        </div>
    </div>
</div>

我的CSS看起来像这样：

My CSS looks like this:

#menu_container
{
clear:both;
float:left;
width:1000px;
}

#menu
{
float:left;
width:700px;
height:50px;
background-color:#654a6f;
}

#home_button
{
height:50px;
width:40px;
float:left;
background-image:url('img/home.jpg');
background-repeat:no-repeat;
}

#menu ul
{
background-color:#485860;
}

#menu li img
{
margin:0;
padding:0;
}

#menu li
{
float:left;
color:#ffffff;
line-height:50px;
padding-left:15px;
padding-right:15px;
text-shadow:1px 1px 2px #3e204d;
}

#menu li.active
{
background-image:url('img/menu_hover.jpg');
background-repeat:no-repeat;
background-position:bottom center;
}

#menu li:hover
{
background-image:url('img/menu_hover.jpg');
background-repeat:no-repeat;
background-position:bottom center;
}

#menu_collapse
{
position:absolute;
float:left;
width:1000px;
height:50px;
background-image:url('img/menu_collapse_bg.jpg');
background-repeat:repeat-x;
background-color:#ffffff;
z-index:99999;
}

#search_menu
{
height:40px;
width:295px;
padding-right:5px;
padding-top:10px;
float:right;
line-height:50px;
background-image:url('img/search_menu.jpg');
background-repeat:no-repeat;
}

#search_menu input
{
float:left;
width:140px;
}

#search_menu button
{
height:32px;
width:32px;
border:0;
outline:0;
float:left;
background-image:url('img/search.jpg');
}

#socialcons
{
height:32px;
width:75px;
float:left;
margin-left:20px;
margin-right:10px;
line-height:0;
}

#socialcons img
{
margin-left:3px;
}

这里是我的JQuery，Javascript：

And here is my JQuery, Javascript:

$(document).ready(function() {
$('#menu li').mouseover(function() {
    $('.active').removeClass('active');
    $('#menu_collapse').animate({height:'210'}, 300);
    $('#menu li').mouseout(function() {
        $(this).addClass('active');
    });
});
    $('#menu_collapse').hover(function(){},function(){
        $('#menu_collapse').animate({height:'50'}, 300);
        $('.active').removeClass('active');
    }); 
});

在IE7中，所有与IE兼容的模式，div #menu_collapsable动画悬停它，从而击败拥有它的目的。

In IE7, and all "compatible" modes with IE, the div #menu_collapsable animates back up when I hover of it, thus defeating the purpose of having it.

帮助!!

推荐答案

$(document).ready(function() {
    $('#menu li').hover(
        function(){
            $('.active').removeClass('active');
            $('#menu_collapse').animate({height:'210'}, 300);
        },
        function(){
            $(this).addClass('active');
        }
    );
    $('#menu_collapse').mouseleave(function(){
        $(this).animate({height:'50'}, 300);
        $('.active').removeClass('active');
    }); 
});

这篇关于JQuery .hover（）不工作在IE7或兼容性模式的每个版本的IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！