javascript - 圆形菜单中的错误

Question

菜单本身:http://codepen.io/anon/pen/zxXvoG

<!-- language: lang-js -->
$(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" )
  .on( "mouseenter", function() {
    $( this ).css({
      "color": "#00CAF2"
    });
  })
  .on( "mouseleave", function() {
    var styles = {
      "color":""
    };
    $( this ).css( styles );
  });

问题:当您将鼠标悬停在一个链接上时， block 通常会被选中，但是当您将光标从菜单项标题移动到它的 block 时，为什么 block “ssssssss8”(“ul”列表中的第一个 block )也会被选中。

Answer 1

删除了 $('a').hover 函数，'ssssssss8' 不再阻塞。请参阅下面的注释代码，

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