Question

我正在使用视频屏幕截图，其中播放按钮图像绝对位于屏幕截图上方。有两个班级; .play（默认值）和.fadeIn。

当我将鼠标悬停在屏幕截图上时，我只是试图“解开”播放按钮。唯一的问题是当你将鼠标悬停在实际按钮上时，它会被切换，因为（我猜）你实际上并没有将鼠标悬停在第一张图像上，所以它被视为鼠标输出事件。

CSS：

.play {
    position: absolute;
    left: 65;
    top: 45;
    opacity: 0.7;
}
.fadeIn {
    opacity: 1;
}

HTML：

<a class="video" href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">
    <img src="../gs1.jpg" alt="YouTube" class="thumbnail" />
    <img src="../play-button-red@40.png" alt="YouTube" class="play"/>
</a>

jQuery的：

$(document).ready(function(){
    $('.thumbnail').hover(function(){
        $(this).next('img').toggleClass('fadeIn');
    });
});

任何帮助都会非常感激，我对此非常感激。

Answer 1

如果你想坚持使用jQuery，那么我会将hover事件绑定到<a>标记并按类定位图像，如下所示：

$('.video').hover(function () {
    $('.play').toggleClass('fadeIn');
});

这也很容易用CSS完成。

图像叠加/悬停 - 带播放按钮的YouTube视频屏幕截图 - 悬停功能出现问题

1 个答案: