Нестандартная проблема (:hover)

Общее
1

Добрый день. очень нравится учиться в вашей академии. Узнал для себя много нового. Хотел бы разобрать непонятный для меня момент.

Страница - http://roosters-pizza.ru/; хочу добиться того, чтобы при наведении на картинку (:hover) стрелочка смещалась левее (40px) - http://prntscr.com/6hvfbx.

Столкнулся сразу с несколькими проблемами.

  1. Сначала пытался сделать это применяя стили (:hover) к div-у с классом “index_menu_click”; в приципе это работает, но, чтобы увидеть смещение, нужно навести прямо на стрелочку, а нужно, чтобы все работало при наведении на всю область.

  2. Далее пробовал выносить нужный div непосрественно под родительский с классом “index_menu_button”; но тут проблема в том, что сайт резиновый и картинки уменьшаются по высоте и ширине, соответственно задать фиксированные отступы нельзя.

Прошу советов и помощи.

2

.index_menu_button:hover .index_menu_click {
position: relative;
left:-40px;
}
Нет?

Сайт вроде не резиновый, размеры фиксированные.
Адаптивный - да.

1 лайк
3

Да, все верно, спасибо. Логику данной инструкции я понимаю - при наведении на родителя происходит действие с .index_menu_click, но где можно подробнее об этом прочитать? Видимо пропустил.

4

https://htmlacademy.ru/courses/42 Начиная с темы: Псевдокласс :hover
https://htmlacademy.ru/courses/50/run/23 Отображаем меню при наведении
Здесь логика такая: если удовлетворяется условие выражения, то этому элементу назначить свойства.

5

index_menu_button .index_menu_click {
-webkit-transition: -webkit-transform 0.4s linear;
-moz-transition: -moz-transform 0.4s linear;
-o-transition: -o-transform 0.4s linear;
transition: transform 0.4s linear;
}
.index_menu_button:hover .index_menu_click {
-webkit-transform:translateX(-40px);
-moz-transform:translateX(-40px);
-ms-transform:translateX(-40px);
-o-transform:translateX(-40px);
transform:translateX(-40px);
}
так тоже можно попробовать)

6

большое спасибо