color of the change in on mouse over and click event using jquery

Question

I want to change the color of the li as red on mouse over. And keep the same color in click event also. I have the following list,

Answer 1

Use css for that:

li:hover {
    color:red;
}

And this is not recommended:

li:focus {
    color: red;
}

JQuery

$('li').click(function(){
    $(this).css('color','red');
});

Answer 2

// CSS: Create the highlight accessible with two classnames.

.highlight, .highlight_stay{
    color:red;
}

Jquery

$(function(){
     $('li').hover(function(){
          $(this).addClass('highlight');
      }, function(){
          $(this).removeClass('highlight');
      });

      $('li').click(function(){
           $(this).addClass('highlight_stay');
      });
});

To remove the click color when a different li is clicked change the last function to this:

$('li').click(function(){
     $(li).removeClass('highlight_stay');
     $(this).addClass('highlight_stay');
});

Answer 3

Mouse hover - css

li:hover {
color: red;
}

if you want it to be green only wen you click - css

li:active {
    color: green;
}

if you want it to change color and remain in that color - JQuery

$("li").click(function (){
    $(this).css("color","green")
});

however you might condider reading up on $("blah").addClass() as it will help DOM load faster. Using css $(this).css("color","green") "directly" on JQuery can slow things down as project gets bigger