html5视频悬停改变另一个元素的不透明度

Question

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

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

但不知怎的，它不起作用！我试过了

$('#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

我在您的网页上看到一个错误的错误。

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

$
undefined

除此之外我没有看到问题。您可以尝试使用mousemove而不是mouseover。

Answer 2

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

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

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