Jquery addClass and Remove Class on hover

Question

Okay i would like to add a class cfse_a to an element #searchput when the mouse is hovering over the element and then when the mouse is not hovering over the element then remove class cfse_a.

api.jquery.com/hover, api.jquery.com/addClass and api.jquery.com/removeClass. — Guffa
– Guffa, Commented May 22, 2012 at 17:06

VisioN · Accepted Answer · 2012-05-22 17:04:55Z

20

Use hover event with addClass and removeClass methods:

$("#searchput").hover(function() {
    $(this).addClass("cfse_a");
}, function() {
    $(this).removeClass("cfse_a");
});

DEMO: http://jsfiddle.net/G23EA/

answered May 22, 2012 at 17:04

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VisioN Over a year ago

@AndersEriksson If it works like a charm, you should upvote the answer and not downvote it.

thecodeparadox · Accepted Answer · 2012-05-22 17:11:23Z

9

$('#searchput').hover(function() {
  $(this).addClass('cfse_a'); // add class when mouseover happen
}, function() {
  $(this).removeClass('cfse_a'); // remove class when mouseout happen
});

You can also use:

$('#searchput').hover(function() {
  $(this).toggleClass('cfse_a');
});

see toggleClass()

DEMO

edited May 22, 2012 at 17:11

answered May 22, 2012 at 17:05

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Comments

Kaidul · Accepted Answer · 2012-05-22 18:03:33Z

2

  $("#searchput").hover(function() {
     $(this).addClass("cfse_a");
     }, function() {
   $(this).removeClass("cfse_a");
   });

Use it.hope it help !

answered May 22, 2012 at 18:03

Kaidul

16k17 gold badges84 silver badges158 bronze badges

Comments

ssj1980 · Accepted Answer · 2012-05-22 17:07:35Z

0

Hope this helps.

$('#searchput').mouseover(function() {
    $(this).addClass('cfse_a');
}).mouseout(function(){
    $(this).removeClass('cfse_a');
});

answered May 22, 2012 at 17:07

ssj1980

3912 silver badges7 bronze badges

Collectives™ on Stack Overflow

Jquery addClass and Remove Class on hover

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related