1

Не получается сделать то, что я хочу. При наведении на пункт меню, хочу чтобы прокрутились на 360 значки возле меню. При наведении на значки они крутятся, а вот если на пункт меню навести, то нет. Как это сделать?

Код PUG

.main-menu
          nav.menu(role="Navigation")
            ul
              li
                a(href="#") Главная
                  img.menu-icons(src="img/menu-icons/home.svg", alt="")

Код SASS

.menu-icons:hover
    transform: rotate(360deg)
    transition: 1.5s

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

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

2
  • 2
    il:hover img.menu-icons{ transform: rotate(360deg) transition: 1.5s} 2 мая 2019 в 22:22
  • Спасибо большое, как я и хотел :)
    – hitFM
    2 мая 2019 в 22:44

1 ответ 1

1

Попробуйте указать hover на ссылке, а стиль применять к её потомку

a:hover img.menu-icons { 
    transform: rotate(360deg); 
    transition: 1.5s;
}

a:hover img.menu-icons {
  transform: rotate(360deg);
  transition: 1.5s;
}
<div class="main-menu">
  <nav class="menu" role="Navigation">
    <ul>
      <li><a href="#">Главная<img class="menu-icons" src="https://s.cdpn.io/profiles/user/2784596/80.jpg?1547403031" alt=""/></a></li>
    </ul>
  </nav>
</div>

2
  • До этого я не додумался, может уже сплю, а может неопытный) Ещё раз спасибо)
    – hitFM
    2 мая 2019 в 22:48
  • @hitFM пожалуйста, обращайтесь 2 мая 2019 в 22:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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