Javascript 圆圈菜单中的错误

菜单本身：

$（文档）.ready（函数（）{
$（'a'）。悬停（函数（）{
$（“ul li”）.eq（$（this.index（））.trigger（“鼠标悬停”）；
}，函数（）{
$（“ul li”）.eq（$（this.index（））.trigger（“mouseout”）；
});
$（'li'）。悬停（函数（）{
$（'a'）.eq（$（this.index（））.css（'background-color'，'#333333'）；
$（this.css（'background-color'，'#333333'）；
}，函数（）{
$（'a'）.eq（$（this.index（））.css（'background-color'，'#666666'）；
$（this.css（'background-color'，'#666666'）；
});
});
$（“a”）
.on（“mouseenter”，function（）{
$（this.css）({
“颜色”：“#00CAF2”
});
})
.on（“mouseleave”，函数（）{
变量样式={
“颜色”：”
};
$（this）.css（样式）；
});

问题是：当您悬停链接时，通常会选择块，但当您将光标从菜单项标题移动到其块时，somewhy块“ss8”（ul列表中的第一个块）也会选择

删除了$（'a'）。悬停函数，并且'ss8'不再阻塞。请参阅下面的注释代码

$(document).ready(function() {
        //$('a').hover(function() {
            //$("ul li").eq($(this).index()).trigger("mouseover");
        //}, function() {
            //$("ul li").eq($(this).index()).trigger("mouseout");
        //});

        $('li').hover(function() {
            $('a').eq($(this).index()).css('background-color', '#333333');
            $(this).css('background-color', '#333333');
        }, function() {
            $('a').eq($(this).index()).css('background-color', '#666666');
            $(this).css('background-color', '#666666');
        });
    });

---

尝试为链接添加类：

<a class="link" href="#menu" id=a1>ssssssss1</a>
<a class="link" href="#menu" id=a2>ssssssss2</a>
<a class="link" href="#menu" id=a3>ssssssss3</a>
<a class="link" href="#menu" id=a4>ssssssss4</a>
<a class="link" href="#menu" id=a5>ssssssss5</a>
<a class="link" href="#menu" id=a6>ssssssss6</a>
<a class="link" href="#menu" id=a7>ssssssss7</a>
<a class="link" href="#menu" id=a8>ssssssss8</a>

---

为什么要触发

mouseover

和

mouseout

？我删除了那个些触发器，它似乎工作得很好。是的，但当你们悬停一个链接时，块的选择就消失了。所以它现在不能正常工作。@bigdady:最大的问题是你正在触发

mouseover

和

mouseout

。这不是你的解决方案的一部分，而且会导致一系列新的问题，所以请删除它。@Andrew Coonce:那么用什么来代替呢？@Bigdad:老实说，我不知道。如果我这样做了，我会为你发布答案…但我知道篡改鼠标事件不是解决方案。这不是我想要的，因为当你悬停链接时，块的选择消失了。谢谢，现在它几乎可以工作了。除SS8外，当您悬停此链接时，块的选择将消失。问题只出现在这个块上，所有其他块在修复后都能正常工作。看起来这是html结构中的一个bug（我指的是带有“SS8”的一个）。

<a class="link" href="#menu" id=a1>ssssssss1</a>
<a class="link" href="#menu" id=a2>ssssssss2</a>
<a class="link" href="#menu" id=a3>ssssssss3</a>
<a class="link" href="#menu" id=a4>ssssssss4</a>
<a class="link" href="#menu" id=a5>ssssssss5</a>
<a class="link" href="#menu" id=a6>ssssssss6</a>
<a class="link" href="#menu" id=a7>ssssssss7</a>
<a class="link" href="#menu" id=a8>ssssssss8</a>

    $('a.link').hover(function() {
        $("ul li").eq($(this).index()).trigger("mouseover");
    }, function() {
        $("ul li").eq($(this).index()).trigger("mouseout");
    });