jQuery - How can I override a background color animation with hover?

Question

I am new to jQuery and need some help with the following problem.

I have a simple table of data (20 rows by 4 columns) on a webpage (asp.net mvc). Note - I have built the table using <div> tags and not <table> <td> <tr> tags.

For each row there is summary data and then the option to click 'Edit Record' on the right hand side of the row. Clicking 'Edit Record' will make additional information visible.

Here is a pictorial: (nb in the 'real' table the names/dates are real names/dates etc.)

----------------------------------------------------------------------------
Name                 Date               Status               [ Edit Record]
----------------------------------------------------------------------------
Name                 Date               Status               [ Edit Record]
----------------------------------------------------------------------------

There are four effects I am trying to create:

1. When a user hovers over a row the background color changes
2. When a user clicks 'Edit Record' the additional information visibility is toggled
3. When the additional information is visible the background-color changes.
4. When the additional information is hidden the background-color defaults to white

So far I have the following jQuery code which almost works (see issue at bottom):

This code handles the 'hover' effect (1):

$("div.record").hover(function() {
      $(this).addClass("recordhover");
            }, function() {
                $(this).removeClass("recordhover");
});

This code handles the visibility of the additional information and background-color(2,3,4):

$("div.recordtopline > div.recorddetail").click(function(event) {
      if (this == event.target) {
          if ($(this).parent("div").next(".recordbelowline").is(':hidden')) {
              $(this).parent("div").next(".recordbelowline").show();
              $(this).parent("div").parent("div").animate({backgroundColor: "#FFEFC6" }, 'fast');
                }
                else {
                    $(this).parent("div").next(".recordbelowline").hide();
                    $(this).parent("div").parent("div").animate({ backgroundColor: "#FFF" }, 'fast');
                }
                return false;
            }
        });

Issue

When I load the webpage, the hover effect works perfectly for all rows. However, if I have selected 'Edit Record' to view more information and then made the additional information hidden the hover effect no longer works on that row i.e. the backgorund-color remains white as per my animation code.

How can I overcome this issue so that the hover effect 'overrrides' the background animation effect?

Answer 1

When you set styles directly on an element (with element.style.thing= or $(element).css() or, here, animate), you're effectively adding an inline style="" attribute holding that rule. Inline style always overrides stylesheet rules.

So after setting the background back to what it was, you would have to remove the rule:

var record= $(this).parent('div').parent('div');
record.animate(
    {backgroundColor: '#FFF'}, 
    {duration: 'fast', complete: function() {
        record.css('backgroundColor', '');
    }}
);

Are you using some plugin to make animating backgroundColor work? Normally it wouldn't. If you don't need the animation it's much simpler to do, by just adding/removing a class on the row when it's selected/unselected and letting the stylesheet handle it.

Answer 2

Two remarks:

• If IE6 compatibility is not an issue, you don't need to bind hover effect, just use css :hover selector on your div.
• Once you apply a style directly on your div that style overrides your previous changes, thus you have to remove background color once the detail div becomes hidden: $(yourDiv).css('backgroundColor', '');