jQuery CSS hover using variable

How can I pass a previously captured variable into a background property using jQuery? I'm working with a very large table, a lot of cells and a lot of data. There are multiple colors being used, being applied to the table rather than the cell (with good reason).

Here is my code (greatly condensed HTML)

<table>
    <tr>
        <td class="nonLevel"><ul class="list"><li>text to go here</li></ul></td>
        <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td>
        <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></td>
        <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td>
        <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td>
        <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td>
    </tr>
</table>


$(".block").hover(function () {
    var myColor = $(this).css("background-color");

    $(this).css({'background-color' : 'yellow'});
    }, function () {
        var cssObj = {
            'background-color' : myColor,
        }
        $(this).css(cssObj);
    });

So I'm trying to capture the original color on rollover (which works when I pass the myColor variable into an alert), then change the color to yellow and then on rollout开发者_如何学Go switch back to 'myColor'.

I've looked at addClasss and removeClass, but they don't seem to cut it in terms of how this is set up. Again, the background color is set in CSS on the table, not the cell, this can't be changed.

---

You could also use jQuery data to store the original color. And then get it on mouseout.

$(".block").each(function (index, elem) {
    $(elem).data('orginalColor', $(elem).css("background-color"))
}).hover(function () {
    $(this).css({'background-color' : 'yellow'});
}, function () {
    $(this).css({'background-color' : $(this).data('orginalColor')});
});

You can read about jQuery data here: jQuery Data

Also I would advise to use delegate instead (jQuery uses it internal in some cases for you). This bind only one event handler for the entire table instead of one for each 'td'

$('.block').each(function (index, elem) { //code });
$('table').delegate('td', 'mouseover', function() { //code });
$('table').delegate('td', 'mouseout', function() { //code });

..fredrik

---

You don't really need to store the background-color - or even use JavaScript/jQuery. You simply could use CSS:

.block:hover {
   background-color: yellow;
}

If you have to use JavaScript (for example, because you need to support IE6), simply set the background-color to empty:

$(".block").hover(function() {
    $(this).css("background-color", "yellow");
}, function() {
    $(this).css("background-color", "");
});

And if you still think you need to store the color, use jQuerys data functionality:

$(".block").hover(function() {
    $(this).data("background-color", $(this).css("background-color"));
    $(this).css("background-color", "yellow");
}, function() {
    $(this).css("background-color", $(this).data("background-color"));
});

---

You could stuff the existing color into a data attribute:

$(".block").hover(function () {
    $(this).data("bkg",$(this).css("background-color"));
    $(this).css('background-color', 'yellow');
}, function () {
    $(this).css("background-color", $(this).data("bkg"));
});

---

The best way to handle this, especially if your table is large, is to use .live() and .data().

$('.block').live('mouseover mouseout', function(event) {
    var $this = $(this);
    if (event.type === 'mouseover') {
        var myColor = $this.css('background-color');
        $this.data('myColor', myColor);
        $this.css('background-color': 'yellow');
    } else {
        $this.css('background-color', $this.data('myColor'));
    }
});

Hot demo action →

---

I believe you have to declare your myColor variable outside of the jQuery call. Otherwise it should be a local variable, meaning it will go out of scope before hover is called a second time on handlerOut.