图片悬停时其他元素变暗功能的三个技术问题求助

我已经实现了画廊图片悬停时其余图片变暗、当前图片播放视频片段的功能，现在遇到三个问题需要解决：

1. 希望悬停图片对应的caption保持opacity为1，尝试$(this).parent().siblings(".media-title").css('opacity', '1');但无效；
2. 如何让mouseover触发的效果仅持续3秒，之后自动隐藏视频并恢复所有图片的完全透明度；
3. 快速切换悬停图片时，部分图片仍保持低透明度，如何避免这种情况。

页面结构：

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

<div class="media-title">                               
<p class="caption">Title</p>
</div>

</div>

现有JS代码：

$(document).on('mouseover', '.db-thumb', function() {
    $(this).find(".clip").css("display", "block");
    $(this).find(".clip").get(0).muted = true;
    $(this).find(".clip").get(0).load();
    $(this).find(".clip").get(0).play();    
    $(".gallery-img:not(:hover)").css('opacity', '0.1');
    $(".media-title:not(:hover)").css('opacity', '0.1'); 
});

$(document).on('mouseleave', '.db-thumb', function() {
    $(this).find(".clip").get(0).currentTime = 0;
    $(this).find(".clip").get(0).pause();
    $(this).find(".clip").css("display","none");
    $(".gallery-img:not(:hover)").css('opacity', '1');
    $(".media-title:not(:hover)").css('opacity', '1');
});

问题1：保持悬停图片对应的caption不透明 #

问题出在选择器逻辑：你用.media-title:not(:hover)设置透明度，但hover的是.db-thumb而非.media-title，导致选择器无法区分当前项。正确做法是先统一设置所有元素的低透明度，再单独恢复当前悬停项的对应元素：

替换mouseover事件里的透明度设置代码：

// 先把所有图片和标题设为低透明度
$(".gallery-img").css('opacity', '0.1');
$(".media-title").css('opacity', '0.1');
// 恢复当前悬停项的图片和对应标题的透明度
$(this).find(".gallery-img").css('opacity', '1');
$(this).closest('.db-gallery').find('.media-title').css('opacity', '1');

问题2：3秒后自动恢复状态 #

通过setTimeout实现自动恢复，同时保存定时器ID避免冲突：

1. 先定义全局定时器变量：

let hoverTimer = null;

2. 修改mouseover事件逻辑：

$(document).on('mouseover', '.db-thumb', function() {
    // 清除之前的定时器，避免快速切换时残留
    clearTimeout(hoverTimer);
    
    const $thumb = $(this);
    const $clip = $thumb.find(".clip");
    
    // 播放视频的逻辑不变
    $clip.css("display", "block");
    const clipEl = $clip.get(0);
    clipEl.muted = true;
    clipEl.load();
    clipEl.play();    
    
    // 问题1的透明度逻辑
    $(".gallery-img").css('opacity', '0.1');
    $(".media-title").css('opacity', '0.1');
    $thumb.find(".gallery-img").css('opacity', '1');
    $thumb.closest('.db-gallery').find('.media-title').css('opacity', '1');
    
    // 设置3秒后自动恢复
    hoverTimer = setTimeout(() => {
        resetGalleryState();
    }, 3000);
});

3. 编写通用重置函数并修改mouseleave事件：

function resetGalleryState() {
    // 暂停所有视频并隐藏
    $(".clip").each(function() {
        this.currentTime = 0;
        this.pause();
        $(this).css("display","none");
    });
    // 恢复所有图片和标题的透明度
    $(".gallery-img").css('opacity', '1');
    $(".media-title").css('opacity', '1');
}

$(document).on('mouseleave', '.db-thumb', function() {
    clearTimeout(hoverTimer);
    resetGalleryState();
});

问题3：快速切换悬停时的透明度异常 #

快速切换时的异常源于旧事件逻辑或定时器未及时重置，上面的代码已通过以下方式解决：

• 每次mouseover时先清除之前的定时器clearTimeout(hoverTimer)，避免旧定时器干扰新操作；
• 使用resetGalleryState函数统一重置所有状态，确保每次切换前回到初始状态；
• 放弃依赖鼠标状态的:not(:hover)选择器，改为先统一设置、再单独恢复的逻辑，避免选择器判断错误。

内容的提问来源于stack exchange，提问作者RASALGHUL