HTML5 视频悬停更改另一个元素的不透明度

Question

所以我这里有一个页面：http://www.ruffcuts.com.sg/work/bosch.htm 其他一些页面。

我希望将鼠标悬停在视频元素上，然后更改前面草地图像的不透明度（id=plax-sphere-52 src=homehead6.png），以便可以看到播放器的控件。

但不知何故它不起作用！我试过了

$('#videocontain').mouseover(function() {
$('img#plax-sphere-52').css('opacity', '0.6');
});
$('#videocontain').mouseout(function() {
$('img#plax-sphere-52').css('opacity', '1');
});

和其他类似的编码，但它就是不起作用。

某处可能存在冲突，或者我只是简单地编码错误？顺便说一下，使用 http://videojs.com/。

Answer 1

我在你的页面上看到一个错误，它破坏了jQuery。

Uncaught TypeError: Object [object Object] has no method 'plaxify' ruffcutsprod.js:4
$
undefined

除此之外，我没有看到问题。您可以尝试鼠标移动而不是鼠标悬停。

Answer 2

mouseover/mouseout事件气泡。因此，当您的鼠标进入视频标记时，会在容器div 上触发鼠标退出事件，在视频div 上触发鼠标输入。

因此，当鼠标移动到视频中时，鼠标悬停会触发，将不透明度设置为 0.6，然后鼠标退出会立即触发并将不透明度设置回 1.0

尝试使用不冒泡mouseentter/mouseleave事件，或者您可以测试事件的源是包装div，而不是该div 中的任何元素。