【发布时间】：2018-03-27 06:35:01
【问题描述】：
我是视频背景的新手。
我的问题是，当我将鼠标悬停在 youtube 的每一侧时，我可以将每一侧（右侧或左侧）的颜色背景更改为来自 youtube 的视频吗？
所以实际上，当我将鼠标悬停在左侧时..橙色背景将被替换为特定的 youtube 视频，而当我将鼠标悬停在右侧（红色背景）时，它将播放视频（不同于左侧）作为背景.
我已经在网上搜索了几个小时，但我就是找不到合适的解决方案。
这是我的代码：
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #E9D94C;
}
.right {
right: 0;
background-color: #EA2029;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 100px;
border-radius: 50%;
}<div class="container col-md-10">
<div class="top-intro" style="position: relative;padding:20px;height:auto;margin:0 auto;font-family: arial;font-size: 12px;z-index: 99999;font-size: 15px;color: #000;text-align: center;border-radius: 10px;top:25px;background:rgba(255,255,255,0.5);">
Lorem ipsum sit amet dolor
</div>
</div>
<div class="container-fluid">
<div class="split left">
<div class="centered">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar woman">
<h2>Jane Flex</h2>
<p>Some text.</p>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar man">
<h2>John Doe</h2>
<p>Some text here too.</p>
</div>
</div>
</div>这是我的完整代码：http://jsfiddle.net/xkobLdv9/4/
或者我需要一些 javascript 的东西来做到这一点？如果有人能提供解决方案将不胜感激，因为我不懂javascript。
谢谢大家，
【问题讨论】：
-
是的，这是可能的，但你需要 javascript（甚至更好：JQuery）来实现它
-
很遗憾，我两个都不懂:(你能帮我吗@TimGerhard先生？
-
我只使用 css 发布了答案
-
@webBer 我不懂 jquery 编码先生，但如果你可以在我以前的 jsfiddle 上添加/修改 jquery 代码，那将非常有帮助。问候，
-
嗨@icaks，我注意到您的问题仍然没有明确的解决方案。这是因为您只是忘记了，还是您的问题仍未得到解答？我很乐意为您的案例提供进一步帮助，否则请将此问题标记为已解决，因为它可以帮助其他用户在 stackoverflow 上获得更好的体验。
标签： javascript html css html5-video mouseover