HelenStar
@HelenStar
Начинающий frontend

Как сделать запуск видео при наведении на пункт меню и не дать ему остановиться при наведении на текст поверх этого видео?

Добрый вечер!
Как сделать запуск видео при наведении на пункт меню и не дать ему остановиться при наведении на текст поверх этого видео? У меня в меню сделан ховер при наведении, но стоит навести мышь на текст поверх видео в пункте, видео останавливается, а надо, чтобы продолжало проигрываться и останавливалось только после покидания указателем пункта меню.
Весь скрипт к нему
$(".menu-item, .menu-item span").on("mouseover", "video", "span", function(){ 
$(this)[0].play(); 
}); 
$(".menu-item").on("mouseleave", "video", function(){ 
this.pause(); 
this.currentTime = 0; 
});

Код одного пункта:
<div href="portfolio.html" class="menu-item nav-link">
       <span class="r">Портфолио</span>
       <video muted>
           <source src="video/portfolio.mp4" type="video/mp4">
           Ваш браузер не поддерживает тег video. Пожалуйста, обновите свой браузер до более свежей версии.
       </video>
</div>

Я понимаю, что видео вырубается из-за "mouseleave", но иначе, чем с "mouseover" запуск видео при наведении мне сделать не удалось((( И не нашла решения другого рабочего, увы. С методом hover работать не хочет. Точнее с ховером можно запустить, но нельзя остановить. Можно сделать меньший z-index у текста, но тогда не будет работать ховер на самом тексте.

Может кто-нибудь делал подобное?
  • Вопрос задан
  • 155 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы