Javascript jQuery脚本不能在IE上正常工作

我对InternetExplorer有一个奇怪的问题，我写了一个导航代码，它在Chrome和FF上工作得很好，在IE上工作了一半（不知道怎么做）。这就是我的问题

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

这就是我在链接上停留时的样子（我设法使它在所有浏览器上都能工作：Chrome、FF、Safari和IE6-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、 很抱歉，因为我是新手，所以无法直接发布图片。

我对您的代码进行了一些重构。当离开悬停状态时，您可以从所有

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

---

这是第三张图片：在CSS中不可能做到这一点吗？为什么？@VainFellowman因为如果我使用CSS3，它在IE上就不起作用了，因为它不支持n-child（），你有没有一个例子来说明为什么需要n-child？包括一些标记？@VainFellowman要针对上一个li，你需要使用jQuery而不是CSS，以及prev（）在IE6-8上不起作用，这就是为什么我得到索引并得到-1