JQuery .hover（）不適用於IE7或每個版本的IE兼容模式

我正在構建一個菜單，允許用戶將鼠標懸停在給定主題上，並且菜單下拉以顯示不同選項的數組。一切工作正常在Safari瀏覽器，Chrome瀏覽器，火狐瀏覽器，歌劇，IE9 - IE8（不兼容的看法），但IE7做一些奇怪的事情。JQuery .hover（）不適用於IE7或每個版本的IE兼容模式

在HTML中，我的菜單是建立這樣的：

<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是這樣的：

#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：

$(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動畫備份，當我把它懸停，從而擊敗有我的目的噸。

幫助!!

來源

2011-08-12 inertialmedia

如果我沒記錯的話，你必須設置每個'#menu li'爲'overflow：hidden'爲IE。我所擁有的只是黑客。例如。 '#menu li {overflow：hidden}'in CSS – Jacksonkr

...你是否試過.mouseenter（）和.mouseleave（）來代替？ – vector

是啊，這不是反應非常好，一些瀏覽器甚至不會注意到它留在div ... – inertialmedia

$(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'); 
    }); 
});

來源

2011-08-12 04:52:18 comu

JQuery .hover（）不適用於IE7或每個版本的IE兼容模式

回答

相關問題