Как сделать переворот карточки по времени?

Question

[barsecky]

Всем привет, нужна помощь((
На сайте есть блок с карточками, которые при ховере переворачиваются.
https://codepen.io/alexej-barsukow-the-flexboxer/p...
Нужно сделать так, что бы если в течении 5 секунд, на них не навили курсор они сами перевернулись и ховер больше не отрабатывал. Так же если сработал переворот при наведении курсора , карточки перевернулиь и не переворачивались обратно.
Как это сделать? Желательно с примерами)) в js не особо силен, но нужно очень))...
Спасибо за помощь!

Answer 1

[GunAlv]

Нужно, чтобы через 5 секунду карточка осталась в перевернутом состоянии? Или перевернулась-вернулась в исходное состояние?
https://codepen.io/GunAlv/pen/wvzVOjN

Comments

[barsecky]

перевернулась и осталась в перевернутом состоянии
и по ховеру когда перевернется что бы не переворачивалась обратно

[Вадим]

barsecky, ну тогда это не совсем ховер, а таймер + mouseover.
Выше Вам уже скинули не плохие примеры.
Таймер через 5 секунд навешивает класс - перевернулась.
Если навели мышкой - навесили класс.
Классы отвечают за состояние.
Вот, собственно, и вся основная логика. Если класса нет - навесить, карточка перевернётся, если есть - ничего не делать.

[barsecky]

Вадим, это мозгом я понимаю))
просто не знаю как это прописать((( говорю же в js не силен(((

[barsecky]

Вадим, Перечитал еще раз ваше сообщение и сделал то что нужно)))
Спасибо за наводку))

Answer 2

[r_g_b_a]

https://jsfiddle.net/kx2oqL1w/