Question

I’m having a problem with a vertical menu and it’s hover action. My client requires that the hover color change in order from a set of 5 colors.

An example of my problem lives in this fiddle (and below), and my script is largely influenced by a previous stackoverflow question called Keep :hover color on mouse click via Jquery.

What I want to happen is that with every hover, the colors change via the array. Once a user clicks on one of the links, that link will be changed to show its hover color (like an active state), but only until another link is clicked, at which point that link will be its own color (switching the active state to the new link). It would be awesome if the active color would be the same as the hover color, but is not necessary.

The HTML and CSS is all standard, and my script is as follows:

    jQuery(document).ready(function($) {

    var colors = ["#737b35","#f57b20","#cbb778","#717174","#3a6f8f"];  

    $("#menu-sidebar-menu li a").each(function(i){

        $(this).click(function() {
            $("#menu-sidebar-menu li a").each(function(i,elem) { // clear the style first
                 $(elem).removeClass("clicked");
           });//so only ONE element is coloured SELECTED
           $(this).addClass("clicked");//add the "selected" colour
        });

        $(this).hover(
            function() {
                if(!$(this).hasClass("clicked")) {
        $("#menu-sidebar-menu li a").css('background', '');
                    $(this).css('background', colors[i % colors.length]);
                }
            }, 
            function(){
                if(!$(this).hasClass("clicked")) {
                    $(this).css('background', '');
                } 
            }
        );

    });

    });

As I have it now, the hovering action is perfect. Once 2 or more links are clicked, however, the background colors remain and do not switch from link to link the way I need them to.

I’m trying to gain a grasp on jQuery, but I don’t have anyone to ask dumb questions to, so I really appreciate any and all help!!

Answer 1

  $("#menu-sidebar-menu li a")
    .click(function () {
      $("#menu-sidebar-menu li a").removeClass("clicked").not(this).css('background', '');
      $(this).addClass("clicked");
    })
    .hover(
      function () {
        if (!$(this).hasClass("clicked"))
          $(this).css('background', colors[$(this).index("#menu-sidebar-menu li a") % colors.length]);
      },
      function () {
        if (!$(this).hasClass("clicked"))
          $(this).css('background', '');
      }
    );

DEMO