錯誤的圓形菜單

菜單本身：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); 
    });

問題：當鼠標懸停在一個鏈接，塊選擇正常，但是當你移動從菜單項標題光標移動到它的塊，somewhy塊「ssssssss8」（'ul'列表中的第一個塊）也會選擇。

來源

2015-03-31 BigDaddy

你爲什麼觸發'mouseover'和'mouseout'？我刪除了這些觸發器，它似乎工作正常。 – 2015-03-31 20:48:09

是的，但是當您懸停鏈接時，塊的選擇會消失。所以它現在不能正常工作。 – BigDaddy 2015-03-31 21:05:07

@BigDaddy：最大的問題是你觸發'mouseover'和'mouseout'。這不會是您解決方案的一部分，並且會導致一系列新問題，因此請將其刪除。 – 2015-03-31 21:19:43

嘗試添加類鏈接：

<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選擇一點點（增加。鏈路）：

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

來源

2015-03-31 21:07:54

謝謝，現在它幾乎在工作。除了ssssssss8，當你懸停這個鏈接時，塊的選擇消失。只有在這個塊上出現問題，所有其他人在修復後都能正常工作。 – BigDaddy 2015-03-31 21:18:42

看起來像是一個進入html結構的錯誤（我的意思是這個「ssssssss8」。 – 2015-04-02 13:10:31

刪除了$（ 'A'）。懸停功能和 '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'); 
     }); 
    });

來源

2015-03-31 20:56:08 Vim

不完全是我想要的，因爲當您懸停鏈接時，塊的選擇將消失。 – BigDaddy 2015-03-31 21:04:04

錯誤的圓形菜單

回答

相關問題