特定类处于活动状态时更改背景颜色答案

【问题标题】：Change background color when specific class is active特定类处于活动状态时更改背景颜色
【发布时间】：2019-06-21 15:09:56
【问题描述】：

我正在制作一个 wordpress 网站，页面加载时标题菜单具有背景颜色，但是当我滚动它时，它会将标题更改为粘性并更改背景颜色。问题是下拉菜单不会改变颜色并且保持与初始标题相同。

我想做的是当标题包含（棒）类来转换下拉菜单的背景颜色。

初始菜单：

<header class=" scroll_header_top_area dark stick scrolled_not_transparent page_header">

当它变形时：

<header class="scroll_header_top_area dark stick scrolled_not_transparent page_header sticky sticky_animate">

那么当标题有 (.sticky) 类时，是否可以添加 javascript 或 jquery 来订购下拉菜单以更改背景颜色？

谢谢。

编辑： https://prnt.sc/o4xf4e https://prnt.sc/o4xf4e

这些截图是为了更好地理解问题，抱歉没有以最好的方式表达。

我有这个 css 只更改下拉列表：

.drop_down .second .inner ul, .drop_down .second .inner ul li ul, .shopping_cart_dropdown, li.narrow .second .inner ul, .header_top .right #lang_sel ul ul, .drop_down .wide .second ul li.show_widget_area_in_popup .widget, .drop_down .wide.wide_background .second{
    background-color: #ffffff!important;
}

我在后面添加了 .scroll_header_top_area.sticky 但什么也没发生。做你告诉我做的只会改变菜单背景而不是下拉菜单。

【问题讨论】：

你根本不需要javascript。当类存在时，您需要一个 CSS 规则来应用样式

标签： javascript jquery html css wordpress

【解决方案1】：

只使用 CSS

.scroll_header_top_area.sticky {
  background-color: <whateveryouwant>;
}

【讨论】：

【解决方案2】：

虽然 css 将是首选方法。这是使用 jquery 解决您问题的方法。

$(".stick").css("background-color", "#000");

'#000 以十六进制表示黑色。

【讨论】：

【解决方案3】：

我太复杂了，就像你们说的那样：

.drop_down .second .inner ul{
    background-color: rgba(0,0,0,0.3)!important;
}

header.sticky .drop_down .second .inner ul{
    background-color: #ffffff!important;
}

谢谢。

【讨论】：