0

как сделать при помощи СSS, что бы при наведении на блок с "подменю 1,подменю 2 и тп" "Меню 1" было выделено жирным шрифтом.

Пытался сделать с помощью такого CSS кода. Но вместе с "Меню 1" выделялись все подменю.

li:hover,
li:focus-within {
    color: rgba(235,23,23,1);
    color: rgb(0 0 0)!important;
    -webkit-text-stroke: 1px #000;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgb(0, 0, 0);
}

введите сюда описание изображения

<li id="5515074" data-id="5515074" class="md-menu__li-l1 menu-item js--menu__li-l1 with-sub">
   <a class="md-menu__href-l1 js--menu-mobile-sildetoggle is--link-level1 f__menu   big-height5"</a>

<div class="md-menu__wrap-l2" id="sub-5515074" data-parent-id="5515074" style="visibility: hidden; opacity: 0;">
     <ul class="mod--submenu-center"><li class="md-menu__li-l2 " style="width: 255.996px;">
     <a class="md-menu__href-l2 f__sub-menu"</a>
  </li><li class="md-menu__li-l2 " style="width: 255.996px;"><a class="md-menu__href-l2 f__sub-menu"</a>
  </li><li class="md-menu__li-l2 " style="width: 255.996px;"><a class="md-menu__href-l2 f__sub-menu"</a>
  </li><li class="md-menu__li-l2 " style="width: 255.996px;"><a class="md-menu__href-l2 f__sub-menu"</a> 
  </li><li class="md-menu__li-l2 " style="width: 255.996px;"><a class="md-menu__href-l2 f__sub-menu"</a> 
  </li><li class="md-menu__li-l2 " style="width: 255.996px;"><a class="md-menu__href-l2 f__sub-menu"</a></li>
</ul>
</div>
</li>

1 ответ 1

1

Задавайте начальные стили для элементов, а после уже для псевдоклассов:

li {
  color: rgba(235, 23, 23, 1);
  color: rgb(0 0 0)!important;
  -webkit-text-stroke: 0px #000;
}

li:hover,
li:focus-within {
  color: rgba(235, 23, 23, 1);
  color: rgb(0 0 0)!important;
  -webkit-text-stroke: 1px #000;
}
<li id="5515074" data-id="5515074" class="md-menu__li-l1 menu-item js--menu__li-l1 with-sub">
  <a class="md-menu__href-l1 js--menu-mobile-sildetoggle is--link-level1 f__menu   big-height5">Меню 1</a>
  <div class="md-menu__wrap-l2" id="sub-5515074" data-parent-id="5515074">
    <ul class="mod--submenu-center">
      <li class="md-menu__li-l2 " style="width: 255.996px;">
        <a class="md-menu__href-l2 f__sub-menu">Подменю 1</a>
      </li>
      <li class="md-menu__li-l2 " style="width: 255.996px;">
        <a class="md-menu__href-l2 f__sub-menu">Подменю 2</a>
      </li>
      <li class="md-menu__li-l2 " style="width: 255.996px;">
        <a class="md-menu__href-l2 f__sub-menu">Подменю 3</a>
      </li>
      <li class="md-menu__li-l2 " style="width: 255.996px;">
        <a class="md-menu__href-l2 f__sub-menu">Подменю 4</a>
      </li>
      <li class="md-menu__li-l2 " style="width: 255.996px;">
        <a class="md-menu__href-l2 f__sub-menu">Подменю 5</a>
      </li>
      <li class="md-menu__li-l2 " style="width: 255.996px;">
        <a class="md-menu__href-l2 f__sub-menu">Подменю 6</a>
      </li>
    </ul>
  </div>
</li>

2
  • Спасибо, уже нашел ответ. Ваш тоже работает. Благодарю за помощь!.
    – 4igur
    Commented 23 окт. 2020 в 12:19
  • @4igur если вы нашли ответ, то можно его опубликовать здесь со ссылкой на источник, а вот автора ответа UModeL тоже надо поблагодарить и не только на словах, у вас есть галочка Commented 23 окт. 2020 в 13:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.