jQuery hover effect

Question

I am new to jQuery and trying to figure out how to use the .hover(); effect in place of the .mouseover() and .mouseout() effects. Here is the scenerio:

I am using a table and want to highlight the row with a CSS class that changes the background color to a light yellow. Here is the CSS:

.bgHvr {
  background-color: #FFFACD;
}

The only way I know how to add the hover effect I desire is:

jQuery(document).ready(function($) {
  $('#table tbody tr').mouseover(function() {
    $(this).addClass('bgHvr');
  });
  $('#table tbody tr').mouseout(function() {
    $(this).removeClass('bgHvr');
  });
});

UPDATE:

After some more help I found out a simpler way of a hover effect:

$('#table tbody tr').hover(function() { 
  $(this).toggleClass('bgHvr');
});

This is possible after the 1.4.2 update to jQuery which changed how the .toggle() effect worked.

Niklas · Accepted Answer · 2011-06-02 13:12:37Z

4

Hover basically combines the 2 events into one.

.hover(mouseover,mouseout)

or in your case:

jQuery(document).ready(function($) {
  $('#table tbody tr').hover(function() {
    $(this).addClass('bgHvr');
  },function() {
    $(this).removeClass('bgHvr');
  });
});

answered Jun 2, 2011 at 13:12

Niklas

30k5 gold badges54 silver badges74 bronze badges

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

1 Comment

Reevine Over a year ago

ok thank you, now I understand. each function simply calls the "mouseover" and "mouseout" that is contained within .hover.

anothershrubery · Accepted Answer · 2011-06-02 13:15:09Z

2

Um...How about just using CSS?

#table tbody tr:hover {
    background-colour: #FFFACD;
}

EDIT: With DEMO

answered Jun 2, 2011 at 13:15

anothershrubery

21.1k16 gold badges56 silver badges102 bronze badges

7 Comments

Niklas Over a year ago

It isn't fully supported in all versions of IE

Patricia Over a year ago

this is way more efficient. and supported by everything from IE 7 and up.

anothershrubery Over a year ago

Fair enough but anything before IE7 shouldn't be supported anyway, in my opinion. IE6 is 10 years old and should be completely disregarded really.

Niklas Over a year ago

@anothershrubery I agree with that comment completely. Unfortunately it isn't always a decission we can make as a coder. If something needs to be supported from IE6 onwards, then it has to be coded as such. Personally, I agree with everything you are saying.

John Strickler Over a year ago

I too want to drop support for browsers that don't follow CSS2/3 or HTML5. Anyhow, since this is simply for effect you could get away with this depending how important the hover effect is.

|

mingos · Accepted Answer · 2011-06-02 13:12:29Z

1

$('#table tbody tr').hover(
    function() {
        $(this).addClass('bgHvr');
    }, function() {
        $(this).removeClass('bgHvr');
    }
);

answered Jun 2, 2011 at 13:12

mingos

24.7k12 gold badges73 silver badges108 bronze badges

Comments

John Strickler · Accepted Answer · 2011-06-02 13:29:36Z

1

Best way I know how and fully compatible with all browsers.

On an unordered list -

JS

$('ul').delegate('li', 'mouseenter mouseleave', function() {
  $(this).toggleClass('hover');
});

CSS

li.hover {
  background-color: #CCC;
}

answered Jun 2, 2011 at 13:29

John Strickler

25.4k5 gold badges55 silver badges70 bronze badges

8 Comments

Reevine Over a year ago

I was not aware of the .toggleClass function. thank you for showing me this.

John Strickler Over a year ago

No problem! A lot of things toggle in jQuery - instead of show()/hide() think about when you can use .toggle() instead.

Reevine Over a year ago

though out of curiosity why use the .delegate function and specify the child element? Could you also do this? $('ul li').hover(function() {$(this).toggleClass('hover');});

John Strickler Over a year ago

Yep you absolutely could do that. Your way binds the event handler directly to the LI element. The delegate method uses "event delegation" and binds only one handler to the UL (the delegate) which acts on the LI elements. So if you had 1,000 LI elements, using your way you'd bind 1000 handlers but event delegation uses only 1. It's probably not necessary if you only have a handful of LI elements. Hope that helps!

Reevine Over a year ago

so if im targeting a common element it would be safer to use delegation so it doesn't tax the javascript engine of the browser with all the handlers for the event?

|

Collectives™ on Stack Overflow

jQuery hover effect

4 Answers 4

1 Comment

7 Comments

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

7 Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related