Как зафиксировать псевдоэлемент при hover?

Question

[artstylee]

есть div
который при hover совершает transform:translate(50px,50px)
я хочу чтобы после совершения transform после него оставался бекграунд на том же месте
но при добавлении псевдоэлемента он повторяет действия при hover
как его зафиксировать?

Answer 1

[bQ1]

Напиши ему при ховере transform:translate(-50px,-50px) . XD т/е он останется на месте а див поедет

Answer 2

[Pavel Pavel]

Если в псевдоэлементе ::before контент какой-то картинки и небольшого текста, то лучше чтобы он и сдвигался а блок которого он относителен был в роли того самого фона. Если псевдоэлемент использовать в качестве фона, он будет поверх относительного блока и z-index мне в этом случае не помог(может что-то не так сделал); к тому же надо постоянно держать указатель на относительном блоке чтобы он не начал возвращаться обратно(можно решить с помощью transition-delay).
Проще всего сделать просто дополнительный блок, тогда и возможностей анимирования будет чуть больше.
https://jsfiddle.net/ep257ofq/1/
Это конечно не ответ на вопрос, скорее просто мнение.

Comments

[artstylee]

ну да, как вариант