28 декабря 2015 г.

CSS transiton «наоборот»


При верстке иногда надо сделать CSS-переход (transition) при отведении мышки не таким, как при наведении. То есть, при наведении мышки - один эффект, при отведении мышки другой эффект (не такой, как при наведении).

Это возможно, и для этого в псевдоклассе :hover надо прописать еще один transition. Тот, что прописан в :hover, будет иметь более высокий приоритет, и перекроет transition, прописанный в самом классе. В итоге:

  • при наведении мышки будет использован transition, записанный в псевдоклассе :hover
  • при отведении мышки будет использован transition, записанный в основном классе

Пример (при наведении - смена цвета, при отведении - переворот):

See the Pen VemvqR by borshak (@borshak) on CodePen.


Комментариев нет :

Отправить комментарий