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
Post a Comment