javascript - jQuery 脚本无法在 IE 上正确运行

Question

我对 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');
  }
);

有谁知道为什么会发生这个问题？

ps对不起，我不能直接发布图片，因为我是新人。

Answer 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','');
  }
);