Изменить цвет фона, когда конкретный класс активен - PullRequest
0 голосов
/ 21 июня 2019

Я делаю сайт WordPress, и меню заголовка имеет цвет фона при загрузке страницы, но когда я прокручиваю, он меняет заголовок на липкий и меняет цвет фона. Проблема в том, что раскрывающееся меню не меняет цвет и остается таким же, как исходный заголовок.

То, что я хотел сделать, - это когда заголовок содержит класс (stick) для преобразования цвета фона выпадающего меню.

Исходное меню:

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

Так можно ли добавить javascript или jquery, чтобы упорядочить раскрывающееся меню для изменения цвета фона, когда заголовок имеет (.sticky) класс?

Спасибо.

Edit: 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 позади, но ничего не произошло. Выполнение того, что вы мне сказали, изменит только фон меню, а не выпадающий список.

Ответы [ 3 ]

0 голосов
/ 21 июня 2019

Хотя css будет предпочтительным подходом. Это решение вашего вопроса с использованием jquery.

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

'# 000 представляет черный цвет в шестнадцатеричном формате.

0 голосов
/ 21 июня 2019

Я слишком усложнил, это было, как вы все сказали:

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

Спасибо.

0 голосов
/ 21 июня 2019

Просто используйте CSS

.scroll_header_top_area.sticky {
  background-color: <whateveryouwant>;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...