javascript - Bug in the circle menu -


menu itself: 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() {     $( ).css({       "color": "#00caf2"     });   })   .on( "mouseleave", function() {     var styles = {       "color":""     };     $( ).css( styles );   }); 

the problem: when hover link, block selected normally, when move cursor menu item title block, somewhy block "ssssssss8"(first block in 'ul' list) selects too.

try add classes links:

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

then modify jquery selector little bit (added .link):

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

Comments

Popular posts from this blog

cakephp - simple blog with croogo -

How to group boxplot outliers in gnuplot -

bash - Performing variable substitution in a string -