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

任何人都知道为什么会出现这个问题？

P.S。对不起，我不能直接发布图片，因为我是新手。

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