CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BigDaddy
BigDaddy

Reputation: 23

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

The problem: when you hover a link, block selected normally, but when you move cursor from menu item title to its block, somewhy block "ssssssss8"(first block in 'ul' list) selects too.

Upvotes: 2

Views: 94

Answers (2)

Mykhailo Karabin
Mykhailo Karabin

Reputation: 31

Try to add classes for 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 a little bit (added .link):

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

Upvotes: 0

Vim
Vim

Reputation: 559

Removed the $('a').hover function and the 'ssssssss8' is not blocking anymore. See the commented code below,

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

Upvotes: 1

Related Questions