CODEWITHSUNDEEP
jqueryjquery-hover
Reevine
Reevine

Reputation: 54

jQuery hover effect

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.

Upvotes: 1

Views: 1906

Answers (4)

John Strickler
John Strickler

Reputation: 25421

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

Upvotes: 1

anothershrubery
anothershrubery

Reputation: 21023

Um...How about just using CSS?

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

EDIT: With DEMO

Upvotes: 2

Niklas
Niklas

Reputation: 30012

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

Upvotes: 4

mingos
mingos

Reputation: 24542

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

Upvotes: 1

Related Questions