jQuery 脚本无法在 IE 上正确运行答案

【问题标题】：jQuery script not working on IE correctlyjQuery 脚本无法在 IE 上正确运行
【发布时间】：2012-07-26 09:29:50
【问题描述】：

我在使用 Internet Explorer 时遇到了一个奇怪的问题，我编写了一个导航代码，它在 Chrome 和 FF 上运行良好，在 IE 中运行了一半（不知道如何）。所以这是我的问题

当我将鼠标悬停在链接上时，会向下打开一个大型菜单并删除当前锚点和前一个锚点的右边框。（见下图）

这就是当我将鼠标悬停在链接上时的外观（我设法让它在所有浏览器上工作：Chrome、FF、Safari 和 IE 6-9

当我将鼠标悬停在链接之外时，问题就出现了，如果我将鼠标悬停在上方，边框将毫无问题地返回，但是当我向下悬停时，上一个链接的右边框不会返回（请参阅下图）

我将在评论中包含第三张图片，因为我不能发布超过 2 个链接。

这是我用 jQuery 写的代码

$(".menu li").hover(
  function () {
    var result = $(this).index();           
    var item = $('a.mainnav')[result - 1];

    $(this).addClass("hover");
    $(this).find('a.mainnav').css('border-right','none');
    $(this).parent().find(item).css('border-right','none');
  },
  function () {
    var result = $(this).index();           
    var item = $('a.mainnav')[result - 1];

    $(this).removeClass("hover");
    $(this).find('a.mainnav').css('border-right','1px solid #000');
    $(this).parent().find(item).css('border-right','1px solid #000');
  }
);

有人知道为什么会出现这个问题吗？

附言抱歉，我是新手，不能直接发图片。

【问题讨论】：

这是第三张图片：s11.postimage.org/50jqbloxv/nav_out_down.png
在 CSS 中不可能做到这一点吗？为什么？
@VainFellowman 因为如果我使用 CSS3，它不会在 IE 上工作，因为它不支持 nth-child()
你有一个例子说明你为什么需要 nth-child 吗？包括一些标记？
@VainFellowman 用于定位您需要使用 jQuery 而不是 CSS 的 prev li，并且 prev() 在 IE6-8 上不起作用，这就是为什么我要获取索引并制作 - 1

标签： javascript jquery internet-explorer cross-browser

【解决方案1】：

我稍微重构了您的代码。离开悬停状态时；您可以从所有 a.mainnav 元素中删除右边框样式吗？它们将返回到您的 CSS 定义。

$(".menu li").hover(
  function () {         
    var item = $('a.mainnav')[$(this).index() - 1];

    $(this).addClass("hover");
    $(this).find('a.mainnav').css('border-right','none');
    item.css('border-right','none');
  },
  function () {    
    $(this).removeClass("hover");
    $(item).find('a.mainnav').css('border-right','');
  }
);

【讨论】：