javascript - 悬停时停止和开始视频

Question

我有以下问题:

• 我想用视频制作一个投资组合网格
• 当用户将鼠标悬停在投资组合元素上时，视频应该开始，如果不在它上面，视频应该停止

问题 我使用 Overlays 向 Portfolio-Items 添加颜色和文本。这就是 Javascript 没有反应的原因。

信息:底部没有 Overlay 的视频只是为了表明 JS 正在工作。

谢谢你的帮助!!!

 
 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.row {
  clear: both;
}

.spalten-6 {
  width: 49.99992%;
}

.spalten-12 {
  width: 100%;
}

.spalten-6,
.spalten-12 {
  float: left;
}

.img-box img {
  width: 100%;
}

.img-box {
    border-left: 3px solid white;
    position: relative;
    margin-left: -3px; /* nur weil ich eine Border von 6px links hinzugefügt habe. Sonst habe ich einen Rand */
}
 
 .img-box-figcaption {
              position: absolute;
              bottom: 0%;
              right: 0%;
              transform: translate(-10%, -10%);
              z-index: 100;
              font-size: 30px;
              color: white;
              text-align: center;
              opacity: 0.9;
              font-weight: 500;
               z-index: 200;
            
        }
        
        .title {
            position: relative;
            top: -25px;
            font-size: 15px;
            
        }
        
        .surround {
            position: relative;
        } 
        
        .img-play-figcaption {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 100;
        }
        
        .img-play-figcaption img {
           width: 30px;
            opacity: 0.8;
        }
        
         .img-box:after {
        position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 99%;
  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.1980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
  background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
  -webkit-background-size: 1px 1px;
  background-size: 1px 4px;
    }

 <div class="row">
   <div class="spalten-3 spalten-small">
     <div class="surround">
      <div class="img-box">
     <img src="Images/portfolio-bg.jpg" alt="">
       </div>
       <div class="img-play-figcaption">
           <img src="Images/play-icon.png" alt="">
       </div>
       <div class="img-box-figcaption">
           <p>CULCHA CANDELA <br> <span class="title">• Rodeo •</ span></p>
       </div>
       </div>
   </div>
   <div class="spalten-6 spalten-small">
      <div class="surround">
       <div class="img-box">
        <div style="text-align:center" onmouseover="Play()" onmouseout="Pause()"> 
  <video id="video1" width="100%">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div>

       </div>
       <div class="img-play-figcaption">
           <img src="Images/play-icon.png" alt="">
       </div>
       <div class="img-box-figcaption">
           <p>FARGO &amp; JAMIE LEE <br> <span class="title">• Jetzt erst recht •</span></p>
       </div>
   </div>
    </div>
    <div class="spalten-3 spalten-small">
      <div class="surround">
       <div class="img-box">
      <img src="Images/portfolio-bg-grey.jpg" alt="">
       </div>
       <div class="img-play-figcaption">
           <img src="Images/play-icon.png" alt="">
       </div>
       <div class="img-box-figcaption">
           <p>FARGO &amp; JAMIE LEE <br> <span class="title">• Jetzt erst recht •</span></p>
       </div>
   </div>
    </div>
    </div>
    
    
    
       <div class="row">
           <div class="spalten-12 spalten-small">
               <div class="footer">
                    <p>© BOOMYEAH PRODUCTION</p>
                </div>
           </div>
        </div>
        
        <div style="text-align:center" onmouseover="Play()" onmouseout="Pause()"> 
  <video id="video1" width="480">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div>

<script type="text/javascript"> 
var myVideo=document.getElementById("video1"); 

function Pause()
{ 
  myVideo.pause(); 
}
function Play()
{
if (myVideo.paused) 
  myVideo.play();     
}    
    
</script> 

Answer 1

 <div class="surround" onmouseover="Play()" onmouseout="Pause()">
        <div class="img-box">
         <div style="text-align:center"  >
   <video id="video1" width="100%">
     <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.ogg" type="video/ogg" />
     Your browser does not support HTML5 video.
   </video>
 </div>

你是如何工作的？ 将 on 事件移动到父 div。 或者尝试使用 img-box 类的 div...我认为您的文本对齐中心 div 被我的 img-box div 覆盖，因此它不会触发鼠标悬停事件...