鼠标悬停非关联div触发视频播放失败问题求助

你现在的代码是直接监听视频元素本身的悬停事件，但你的需求是通过另一个无层级关系的exbox1 div来触发视频播放，对吧？不用动DOM嵌套结构，只要调整事件绑定的目标就能搞定。

修改后的代码示例 #

首先确保你的HTML里存在目标exbox1元素（假设它的class为exbox1）：

<div class="exbox1">这是需要鼠标悬停的div</div>
<div class="video"> 
  <video class="vBGex2" src="vBackGround2.mp4" muted></video> 
</div>

然后调整JavaScript，把事件监听对象换成exbox1：

$(document).ready(function() { 
  // 监听exbox1的鼠标移入事件
  $(".exbox1").on("mouseover", function() { 
    const targetVideo = $(".vBGex2")[0];
    if (targetVideo) {
      targetVideo.play();
    }
  }).on('mouseout', function() { 
    const targetVideo = $(".vBGex2")[0];
    if (targetVideo) {
      targetVideo.pause();
    }
  }); 
})

关键细节说明 #

1. 事件目标转移：把原本绑定在视频元素上的mouseover/mouseout事件，切换到exbox1上，这样鼠标悬停这个独立div时就能触发视频控制逻辑。
2. 自动播放兼容性：我给video标签加了muted属性——现在主流浏览器都要求视频静音才能触发自动播放，不加这个属性的话，play()很可能会被浏览器拦截，导致功能失效。
3. 容错处理：代码里加了if (targetVideo)的判断，避免页面找不到视频元素时抛出报错。

如果你的exbox1是用id定义的（比如<div id="exbox1">），记得把选择器改成$("#exbox1")就行！

内容的提问来源于stack exchange，提问作者Massive Boat