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?

Answer 1

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.