Псевдокласс hover и свойство transform

Question

Проблема пустяковая, но совсем не могу понять почему так происходит. Сделал кнопки прокрутки контента из одной кнопки next.svg для перехода в перед и назад(просто прописал свойство transform:rotate(180deg)). Решил добавить hover на кнопки для перемещение на 10px(transform: translate(10px)), но получается так что, при наведении на кнопку prev срабатывают оба transform и кнопка не только смещается, но и переварачивается. Пробовал прописать свойство приоритетом через html(style="transform:rotate(180deg)"), но так кнопка вообще не реагирует на hover.

Код css:

 & .arrow {
    fill: white;
    width: 40px;
    height: 40px;
    filter: drop-shadow(0px 0px 5px rgba(34, 60, 80, 0.2));

    position: absolute;
    top: 50%;
    margin-top: -20px;
    z-index: 2;

    transition: transform 0.2s linear;
  }
  & .arrow--next {
    right: -2px;

    &:hover {
      transform: translateX(10px);
    }
  }
  & .arrow--prev {
    left: -2px;
    transform: rotate(180deg);

    &:hover {
      transform: translateX(-10px);
    }
  }

Код html:

<svg class="arrow arrow--next">
        <use xlink:href="#arrow"></use>
      </svg>
      <svg class="arrow arrow--prev">
        <use xlink:href="#arrow"></use>
      </svg>

Answer 1

Потому что по ховеру Вы переопределяете transform - по сути заменяете rotate на translate. Нужно в ховере для перевёрнутой кнопки писать оба свойства:

img {
  width: 45px;
  position: relative;
  transition: .2s;
}
.left:hover {
  transform: translateX(10px)
}
.right {
  transform: rotate(180deg);
}
.right:hover {
  transform: translateX(-10px) rotate(180deg);
}

<img src="http://cdn.onlinewebfonts.com/svg/img_559051.png" alt="" class="left">
<img src="http://cdn.onlinewebfonts.com/svg/img_559051.png" alt="" class="right">

БЛОГ НА HUSL

Псевдокласс hover и свойство transform

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