Preserving CSS :hover After jQuery CSS Changes

Question

TL;DR: I'm using jQuery .css() to set the background color of an element, but I need to preserve css's :hover functionality.

I am using a jQuery plugin to enable imbedding images into a set of dropdowns. It does this by changing the dropdown options into a series of nested div and a elements with a good amount of additional styling. On my site, these dropdowns are used for selecting elements to customize the appearance of a product's preview before customers make their purchase. The images added are thumbnails of the selections available to the customer.

That all works great, except that one of the customization options includes partially-transparent images (of black, gold, and silver) that are overlaid atop another customization. Basically no background color works to get them all to show up, so we are using jQuery to set the background color of the overlaid component to match the color of the item selected for the background component. Some will not show up well, but those will also show up poorly in the preview and in the final product, so it is fine if they look bad.

All of that works using this code:

function changeSelection(id, selection, color) 
{
    //other unrelated code

    //update color of overlay to match background selection
    if (id == "SelectBackground") {
        //update background color
        $("#SelectOverlay_title").css('background-color', color);
        $("#SelectOverlay_child > a").css("background-color", color);
        $("#SelectOverlay_child > a.selected").css("background-color", "#66CCFF");

        //update text color - white for dark backgrounds; black for light
        if ((color.substring(1, 2) > -1) && (color.substring(1, 2) < 7)) {
            $("#SelectInsignia_title").css('color', "#FFFFFF");
            $("#SelectInsignia_child > a").css('color', "#FFFFFF");
        } else {
            $("#SelectInsignia_title").css('color', "#000000");
            $("#SelectInsignia_child > a").css('color', "#000000");
            $("#SelectInsignia_child > a.selected").css("color", "#FFFFFF");
        }
    }
}

The problem, however, is that after applying these changes, the SelectOverlay a:hover css no longer fires to provide the customer with visual feedback about which selection they are currently over.

I briefly considered applying the changes through swapping out css classes instead of calling .css() but that becomes problematic when you consider the potential for dozens of different background colors, each of which is pulled dynamically from the database.

So...what can I do to preserve the SelectOverlay a:hover effects after changing the background color in jQuery?

thirtydot · Accepted Answer · 2011-08-24 17:07:20Z

4

Instead of setting color/background-color as inline styles via .css(), you should use CSS classes. That way, #SelectOverlay a:hover will still be specific enough to work.

The quick but naughty option is to use !important on every property that needs it inside #SelectOverlay a:hover.

answered Aug 24, 2011 at 17:07

thirtydot

229k51 gold badges393 silver badges354 bronze badges

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

3 Comments

Jeffrey Blake Over a year ago

As I noted, I considered this option, but the colors are drawn from the database dynamically as a sub-component of the background selection. Creating CSS classes for each would lead to in excess of 100 new classes (to match the different states available in the dropdown plugin) and would create a nightmare for future maintainability.

thirtydot Over a year ago

I see. I guess I only read the TL;DR :) In that case, sod it: just use !important. I think two instances of !important is nicer than any of the alternative solutions.

Jeffrey Blake Over a year ago

Indeed, !important does the trick. Accepting this for that.

Community · Accepted Answer · 2017-05-23 12:19:53Z

3

I think thirtydot has the best answer, but you could also add a hover function to your script:

$("SelectOverlay a").hover(function () {
    $(this).css({'background-color' : 'yellow', 'font-weight' : 'bold'});
  }

etc.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Aug 24, 2011 at 17:09

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

2 Comments

Jeffrey Blake Over a year ago

+1 This works great in testing, but I'm accepting thirtydot's !important method because it feels cleaner and simpler.

Jason Gennaro Over a year ago

No worries, @Jeffrey! Like I mentioned... I think his is the better answer. ;-)

Collectives™ on Stack Overflow

Preserving CSS :hover After jQuery CSS Changes

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related