jquery - 保留 CSS :hover After jQuery CSS Changes

Question

TL;DR:我正在使用 jQuery .css() 设置元素的背景颜色，但我需要保留 css 的 :hover 功能。

---

我正在使用 a jQuery plugin启用将图像嵌入到一组下拉列表中。它通过将下拉选项更改为一系列具有大量附加样式的嵌套 div 和 a 元素来实现这一点。在我的网站上，这些下拉菜单用于选择元素以在客户购买之前自定义产品预览的外观。添加的图像是可供客户选择的缩略图。

除了其中一个自定义选项包括覆盖在另一个自定义选项之上的部分透明图像(黑色、金色和银色)之外，一切都很好。基本上没有背景颜色可以让它们全部显示出来，所以我们使用 jQuery 来设置覆盖组件的背景颜色，以匹配为背景组件选择的元素的颜色。有些不会很好地显示，但那些在预览和最终产品中也会显示得很差，所以如果它们看起来不好也没关系。

所有这些都使用这段代码:

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

但是，问题在于应用这些更改后，SelectOverlay a:hover CSS 不再触发以向客户提供有关他们当前选择的视觉反馈。

我简单地考虑过通过换出 css 类而不是调用 .css() 来应用更改，但是当你考虑到可能有几十种不同的背景颜色时，这就成了问题，每一种背景颜色都是动态提取的来自数据库。

那么...在 jQuery 中更改背景颜色后，如何保留 SelectOverlay a:hover 效果？

Answer 1

您应该使用 CSS 类，而不是通过 .css() 将 color/background-color 设置为内联样式。这样，#SelectOverlay a:hover 仍然足够具体，可以正常工作。

快速但顽皮的选择是在 #SelectOverlay a:hover 中的每个需要它的属性上使用 !important。