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.

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.

• javascript
• jquery
• html
• css

2 Answers 2

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
});

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";
}