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

问题：当你悬停一个链接时，正常选择阻止，但是当你将光标从菜单项标题移动到它的块时，有些人会阻止＆＃34; ssssssss8＆＃34;（第一个阻止＆＃39; ul＆＃39 ; list）也选择。

Answer 1

删除了$（＆＃39; a＆＃39;）。悬停功能和＆＃39; ssssssss8＆＃39;不再阻止了。请参阅下面的评论代码，

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

Answer 2

尝试添加链接类：

<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>

然后稍微修改jquery选择器（添加.link）：

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

圈子菜单中的错误

2 个答案: