jQuery悬停替代在IE10中不起作用

Question

我有一个有两个级别的导航。

<ul id="level1">
  <li id="Level1ListItemOne">
      <ul id="Level2">
        <li></li>
        <li></li>
        ...
     </ul>  
 </li>
  <li id="Level1ListItemTwo">
      <ul id="Level2">
        <li></li>
        <li></li>
        ...
     </ul> 
  </li>
  ...
</ul>

当页面打开时 Level1ListItemOne Level2 是可见的。 当用户将鼠标悬停在 Level1ListItemTwo 上时，Level1ListItemOne 的 Level2 消失，Level1ListItemTwo 的 Level2 出现。 当用户将鼠标悬停在 Level1ListItemTwo 之外时，Level1ListItemOne 的 Level2 会重新出现。

我正在用 JQuery 做这个

jQuery("#Level1ListItemTwo").hover(
    function(){ 
        jQuery("#Level1ListItemOne> #level2").hide(); //hide level2 when hover over
        jQuery("#Level1ListItemOne").css("background-color","#003366");
    },
    function(){
        jQuery("#Level1ListItemOne> #level2").show(); //show level2 when hover out
        jQuery("#Level1ListItemOne").css("background-color","#0072c6");
    }
);

这在 FireFox、Chrome、IE9 中完美运行，但 不是 IE10

在 IE10 中它第一次可以工作，但之后就不行了。所以 Level1ListItemTwo 的 Level2 永远不会再出现。 IE10 有什么不同 - 我在开发者工具中看不到任何东西！

Answer 1

我认为这是因为您的 id 不正确，因为区分大小写。

如果浏览器支持，jQuery 的类选择器使用 javascript 方法 getElementsByClassName。此方法在 quirks-mode 页面上不区分大小写，在非 quirks-mode（符合标准）页面上区分大小写。

另一个提示，id 在你的页面中必须是唯一的，所以切换到 class 而不是 id。

代码：

jQuery("#Level1ListItemTwo").hover(
    function(){ 
        jQuery("#Level1ListItemOne>.Level2").hide(); //hide level2 when hover over
        jQuery("#Level1ListItemOne").css("background-color","#003366");
    },
    function(){
        jQuery("#Level1ListItemOne>.Level2").show(); //show level2 when hover out
        jQuery("#Level1ListItemOne").css("background-color","#0072c6");
    }
);

参考：https://developer.mozilla.org/en-US/docs/Case_Sensitivity_in_class_and_id_Names

演示：http://jsfiddle.net/W9GL4/