悬停在图像上时播放视频并显示文本

Question

我正在寻找一种将鼠标悬停在触发播放视频的图像上的方法。当鼠标不再位于图像上方时，应再次显示图像（海报？）。视频上也应该显示文本。请参见下面的Loop示例。他们对他们的案例有这种悬停效果。我尝试过使用图像叠加层或海报图像的多种解决方案，但是这些解决方案都无法使我从图像过渡到视频。请参见下面的代码。我不知道如何在悬停时获取此“ Explore”文本的图像/视频上添加文本，如Loop中的示例：https : //www.agentur-loop.com/（悬停在“数字”上'以查看效果）。编辑1：在这里：agentur-loop.com/cases，它们在从图像到视频的悬停上有一个非常平滑的过渡，如果我将鼠标悬停在视频上，它会平滑地过渡/淡入（海报）图像。在下面的最底部可以看到我的当前状态：fredericlouis.com/fredericlouis.com/admin预先感谢！–$(document).ready(function() {  $('.video2').each(function(i, obj) {    $(this).on("mouseover", hoverVideo);    $(this).on("mouseout", hideVideo);  });});function hoverVideo() {  $(this).find(".overlayImage").hide();  $(this).find(".thevideo")[0].play();}function hideVideo(video) {  $(this).find(".thevideo")[0].currentTime = 0;  $(this).find(".thevideo")[0].pause();  $(this).find(".overlayImage").show();}video2 {  width: 1200px;}.overlayImage {  position: absolute;}<div class="video2">  <img src="images/apple_vr10.png" class="overlayImage" width="600" alt="apple vr" />  <video class="thevideo" loop muted poster="images/apple_vr10.png" onmouseout="this.pause()">        <source src="videos/apple_vr.mp4" type="video/mp4">    </video> </div>

Answer 1

网站agentur循环将鼠标悬停在文本上时可在短时间内切换多个图像...

您可以通过为每张幻灯片添加过渡时间为0.1s（非常小）的幻灯片放映（轮播）来实现此目的；

谢谢...