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 that you have read and understand our privacy policy and code of conduct.

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