Question

好的，这是我的设置

HTML：

<a href="#">
    <div class="video-play-button"></div>
</a>
<img class="video-image" src="URL" alt="" />
<div class="video-underlay"></div>

“视频播放按钮”是“视频图像”的叠加，它是图像的100％x 100％，我想要做的是当你将鼠标悬停在“视频播放按钮上”时“它改变了”视频图像“的不透明度，然后显示”视频 - 底层“

jQuery的：

jQuery(".video-play-button").hover(
    function () {
        jQuery(".video-image").stop().animate({opacity: '0.7'}, 300);},
    function () {
        jQuery(".video-image").stop().animate({opacity: '1'}, 400);
});

这样可行，但由于我将要使用相同代码和类的多个元素，因此它们不会影响所有元素。

我是js和jquery的新手，所以我推荐

Answer 1

您可以将hover限制为当前阻止，首先使用nearest（）找到父a锚标记，然后使用类video-image移动到anhor的兄弟

jQuery(".video-play-button").hover(
    function () {
        jQuery(this).closest('a').next(".video-image").stop().animate({opacity: '0.7'}, 300);},
    function () {
        jQuery(this).closest('a').next(".video-image").stop().animate({opacity: '1'}, 400);
});

Answer 2

除Adil's回答之外，这也应该有效：

jQuery(".video-play-button").parent().hover(
    function () {
        jQuery(this).next().stop().animate({opacity: '0.7'}, 300);},
    function () {
        jQuery(this).next().stop().animate({opacity: '1'}, 400);
});

jQuery选择“this”之外的类

2 个答案: