change color on hover

Question

Hi!

I have buttons and they change colors when they are hovered. But I am trying to make a button remain with a changed color after being hovered until another button is hovered. I read a post and it said to use a:focus but this is an implementation that works only when clicking a button, not with mouseover thing.

Any help appreciated.

Answer 1

Here's how to do it in jQuery:

$('.button').mouseover(function(event) { // mouseOver event on all buttons with class .button
  $('.button').css({background:"green"}); // reset all buttons' color to default green
  $(event.target).css({background:"red"}); // change current button color to red
});

Answer 2

html:
<a class="test" href="#" onmouseover="changeColor(this);">test</a>
<a class="test" href="#" onmouseover="changeColor(this);">test2</a>

js/jquery:
function changeColor(obj) {
   $('.test').css({background:"none"});
   obj.style.backgroundColor="green";
}