jQuery CSS hover using variable

Question

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 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.

your missing a semi colon after this line var cssObj = { 'background-color' : myColor, } — John Hartsock
– John Hartsock, Commented Nov 22, 2010 at 14:47

fredrik · Accepted Answer · 2010-11-22 14:59:30Z

3

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

answered Nov 22, 2010 at 14:59

fredrik

17.6k9 gold badges57 silver badges72 bronze badges

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

Comments

RoToRa · Accepted Answer · 2010-11-22 14:56:39Z

2

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

answered Nov 22, 2010 at 14:56

RoToRa

38.5k12 gold badges73 silver badges110 bronze badges

2 Comments

Keith Over a year ago

I didn't realise you could set a color to empty, works perfectly. Thanks :)

fredrik Over a year ago

+1 for css solution. But you should really don't restore data for each mouseover. Store the background-color as data once from the beginning.

Keltex · Accepted Answer · 2010-11-22 14:50:10Z

1

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

answered Nov 22, 2010 at 14:50

Keltex

26.5k12 gold badges83 silver badges112 bronze badges

1 Comment

Matt Ball Over a year ago

@Keith: see my answer for the jQuery way to do it; but RoToRa's answer is the better way to implement CSS hover effects.

Matt Ball · Accepted Answer · 2010-11-22 14:58:59Z

1

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 →

answered Nov 22, 2010 at 14:58

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Comments

Thomas Langston · Accepted Answer · 2010-11-22 14:50:18Z

0

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.

answered Nov 22, 2010 at 14:50

Thomas Langston

3,7451 gold badge28 silver badges41 bronze badges

Collectives™ on Stack Overflow

jQuery CSS hover using variable

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related