悬停在图像上使其他消失

Question

在将鼠标悬停在图库中的图像上时创建了一个功能，所有其他图像都变暗并播放影片剪辑。 直播页面

在三件事上寻求帮助：

1. 我希望图像的标题在悬停在图像上时保持其不透明度。在悬停时尝试了以下但没有任何反应：

$(this).parent().siblings("#caption").css('opacity', '1'); 

2. 在“鼠标悬停”时启动相同功能的最简单方法是什么，但它只持续 3 秒，然后取下胶片并使其他图像完全不透明？

3. 如果你快速将鼠标悬停在图像上，一些图像保持低不透明度，这可以避免吗？

我的设置：

<div class="db-gallery">
                            
<div id="db-thumb">
<img id="image" src="url"/>
<video class="clip" id="video" style="display:none;">
<source src="url" autoplay="false" muted="muted" type="video/mp4" /></video>
</div>
                                
<p id="caption">Title</p>

</div>

$(document).on('mouseover', '#db-thumb', function() {
    $(this).find("#video").css("display", "block");
    $(this).find("#video").get(0).muted = true;
    $(this).find("#video").get(0).load();
    $(this).find("#video").get(0).play();    
    $("#image:not(:hover)").css('opacity', '0.1');
    $("#caption:not(:hover)").css('opacity', '0.1'); 
});

$(document).on('mouseleave', '#db-thumb', function() {
    $(this).find("#video").get(0).currentTime = 0;
    $(this).find("#video").get(0).pause();
    $(this).find("#video").css("display","none");
    $("#image:not(:hover)").css('opacity', '1');
    $("#caption:not(:hover)").css('opacity', '1');
});