Как воспроизводить видео при наведении (с шагом по ширине 25%) ⇐ CSS

[Anonymous]

Недавно я нашел этот вопрос: Как скрыть видео при наведении курсора?

И это прекрасно показывает, что мне нужно для веб-сайта прямо сейчас.

Мой вопрос,

А возможно ли это и с 4 видео, или это расширяет возможности? Мне нужно, чтобы каждая четверть видео отображала другое (короткое) видео.

К сожалению, я все еще новичок в HTML и CSS, поэтому надеюсь, что кто-нибудь сможет мне с этим помочь

Код из ответа в исходной теме опубликован ниже.

$('.video_wrapper .video_hover').hover(function() { $('.video_wrapper').addClass('isHover'); }, функция() { $('.video_wrapper').removeClass('isHover'); }); .video_wrapper { переполнение: скрыто; положение: относительное; } .video_wrapper видео { высота: авто; ширина: 100vw; } .video_wrapper .eat_video { слева: 0; непрозрачность: 0; позиция: абсолютная; верх: 0; } .video_wrapper .video_hover { внизу: 0; курсор: указатель; позиция: абсолютная; правильно: 0; верх: 0; ширина: 50%; z-индекс: 1; } .video_wrapper .live_video, .video_wrapper .eat_video { -webkit-transition: плавность входа и выхода всего 0,3 секунды; -moz-transition: плавность входа и выхода всего 0,3 с; -o-transition: все 0,3 с плавность выхода; переход: все 0,3 секунды с плавностью входа и выхода; } .video_wrapper.isHover .live_video { непрозрачность: 0; } .video_wrapper.isHover .eat_video { непрозрачность: 1;