html5视频悬停更改另一个元素的不透明度
html5视频悬停更改另一个元素的不透明度
提问于 2012-08-11 04:44:55
所以我这里有一个页面：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/。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-08-11 06:00:09
我在你的页面上看到了一个破坏jQuery的错误。
Uncaught TypeError: Object [object Object] has no method 'plaxify' ruffcutsprod.js:4
$
undefined除此之外，我看不出有什么问题。你可以尝试一下mousemove而不是mouseover。
Stack Overflow用户
发布于 2012-08-11 06:04:57
mouseover/mouseout事件气泡。因此，当您的鼠标进入video标记时，将在容器div上激发mouseout事件，并在video div上激发mouseenter事件。
因此，当鼠标移动到视频中时，鼠标经过时会触发，将不透明度设置为0.6，然后鼠标输出会立即触发并将不透明度设置回1.0
尝试使用不冒泡的mouseentter/mouseleave事件，或者可以测试事件的源是包装div，而不是该div中的任何元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11908998
复制相关文章
相似问题
腾讯云开发者
