Проблема пустяковая, но совсем не могу понять почему так происходит. Сделал кнопки прокрутки контента из одной кнопки 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>