Question

我正在尝试播放视频，同时将鼠标悬停在我网站img-gallery的同一个div上，但显然我做错了。

视频应该在鼠标悬停时播放的假想隐藏图像开始渲染。我觉得它显而易见但我没有足够的经验来解决它。

有什么想法在悬停时隐藏图像吗？

以下是代码：

HTML

        <div id="container">
     <div class="viewer">
       <img class="thumb" target="#video_1" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
       <video id="video_1" preload loop>
         <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
         No video support
       </video>
       </div>
     <div class="viewer">
       <img class="thumb" target="#video_2" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
       <video id="video_2" preload loop>
         <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
         No video support
       </video>
       </div>
     <div class="viewer">
       <img class="thumb" target="#video_3" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
       <video id="video_3" preload loop>
         <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
         No video support
       </video>
       </div>
    </div>

CSS

    .viewer {
    width: 530px;
    height: 290px;
    display:inline-block;
    }

    video {
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
    }

JS

    $(document).ready(function() {
      $('.thumb')
        .mouseover(function() {
          $(this).hide();
          var myVid = $(this).attr('target');
          $( myVid ).show().trigger('play');
       })
       .mouseout(function() {
          $('video').trigger('pause').hide()
          $(this).show();
      });
    });

这里还有一个保存的[PEN]：https://codepen.io/anon/pen/oEwRJQ

Answer 1

您的代码存在的问题是因为您在.thumb事件中隐藏mouseover元素会立即触发再次显示该事件的mouseout事件。这会导致隐藏/显示循环，从而导致您看到的闪烁。

要解决此问题，请将事件挂钩到拇指和视频的父元素。这样您就不需要使用非标准target属性，而是可以使用DOM遍历找到相关的video元素，从而使代码更具可扩展性和健壮性。您还可以使用mouseenter和mouseleave事件来防止在命中区域边缘附近出现任何可能的闪烁。

＆＃13;

$(function() {
  $('.viewer').mouseenter(function() {
    var $el = $(this);
    $el.find('.thumb').hide();
    $el.find('video').show()[0].play();
  }).mouseleave(function() {
    var $el = $(this);
    $el.find('.thumb').show();
    $el.find('video').hide()[0].pause();
  });
});

＆＃13;

.viewer {
  width: 530px;
  height: 290px;
  display: inline-block;
}

video {
  width: 100%;
  height: 100%;
  position: relative;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
  <div class="viewer">
    <img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
    <video id="video_1" preload loop>
     <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
     No video support
   </video>
  </div>
  <div class="viewer">
    <img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
    <video id="video_2" preload loop>
     <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
     No video support
   </video>
  </div>
  <div class="viewer">
    <img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
    <video id="video_3" preload loop>
     <source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
     No video support
   </video>
  </div>
</div>

＆＃13;

Answer 2

  $(document).ready(function() {
  $('.viewer').each(function(){
    var $this = $(this);
    $this.mouseover(function() {
      $(this).find('.thumb').hide();
      $('video', $this).show().trigger('play');
    })
    $this.mouseout(function() {
      $('video', $this).trigger('pause').hide()
      $(this).find('.thumb').show();
    });
  });
});

在图像鼠标悬停上播放视频会导致重击故障

2 个答案: