jquery - jQuery选择“this”之外的类

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当前块，首先使用最接近（）找到父a锚标记，然后移动到具有类的anhor的兄弟video-image

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

除了阿迪尔的 回答，这也应该有效：

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);
});