Пропадает подсветка иконки дропдауна при наведении курсором на подменю

Question

Подскажите, пожалуйста, как сделать так, чтобы стрелка дроп дауна оставалась подсвеченной, когда открывается подменю?

Сейчас она подсвечивается, только когда наводишь непосредственно на основной пункт меню. Но стоит спуститься мышкой вниз в подменю, подсветка исчезает.

.menu-item-has-children>a::after {
  content: '';
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z'/%3E%3C/svg%3E);
  position: absolute;
  right: 18px;
  top: 35px;
  display: inline-block;
  width: 16px;
  height: 16px;
}

.menu-item-has-children>a:hover::after {
  filter: invert(81%) sepia(6%) saturate(1976%) hue-rotate(89deg) brightness(83%) contrast(86%);
}

<nav id="navigation" class="primary-navigation mobile-menu-wrapper" role="navigation">
  <ul id="menu-1" class="menu clearfix toggle-menu">
    <li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1 toggle-menu-item-parent">
      <a title="Статьи по психологии" href="">Статьи</a>
      <ul class="sub-menu toggle-submenu" style="display: none;">
        <li id="menu-item-49" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-49"><a href="">Как и где найти хорошего психолога</a></li>
        <li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="">Виды психотерапии</a></li>
        <li id="menu-item-38" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-38"><a href="">Ловушки мышления</a></li>
        <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="">Сон и сны</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

Попробуйте

.menu-item-has-children:hover > a::after {
    filter: invert(81%) sepia(6%) saturate(1976%) hue-rotate(89deg) brightness(83%) contrast(86%);
}

То есть у вас hover прикреплен к первому тегу a элемента с классом .menu-item-has-children В моем случает - при наведении на элемент с классом .menu-item-has-children взять первый элемент a и применить такие то стили к его псевдоэлементу.

Но это все чисто логически, проверять надо))

БЛОГ НА HUSL

Пропадает подсветка иконки дропдауна при наведении курсором на подменю

Ответы (1 шт):