Owl Carousel悬停图片显示对应Div异常：仅首张生效问题排查

视图代码（MVC） #

<div class="owl-carousel owl-theme">
    @if (Model?.CarrouselImages.Count > 0)
    {
        @foreach (var item in Model.CarrouselImages)
        {
            <div class="item">
                <div><img src="~/@item.Src" class="hover-img"  data-id="@item.Id"></div> 
               <div id="info@{@item.Id}" style="display:none">@item.Name</div>
            </div>
        }
    }
</div>

原jQuery代码 #

$(".hover-img").hover(function(){    
    var id = $(this).data("id");   
    var infoId="#info"+id;   
    $(infoId).css('display','block');
},function(){
    var id = $(this).data("id");
    var infoId="#info"+id;
    $(infoId).css('display','none');
})

问题原因 #

1. 动态元素事件绑定失效：Owl Carousel会动态克隆轮播项实现滑动、循环效果，你初始的hover事件只绑定在页面加载时已存在的DOM元素上，动态生成的克隆元素未绑定事件，导致除原始第一张图外，其他图片无法触发悬停逻辑。
2. 重复ID冲突：轮播克隆元素时，会同步克隆包含info@{@item.Id}的ID，页面出现多个相同ID的元素，jQuery通过ID选择器只会匹配第一个元素，这是仅第一张图生效的核心原因。

解决办法 #

推荐用相对DOM关系查找替代ID选择，同时结合事件委托确保动态元素能触发事件，这是最稳妥的方案：

// 事件委托绑定到轮播容器，覆盖所有动态生成的元素
$(".owl-carousel").on("mouseenter", ".hover-img", function() {
    // 找到当前图片所在item下的描述div，无需依赖ID
    $(this).closest(".item").find("[id^='info']").show();
}).on("mouseleave", ".hover-img", function() {
    $(this).closest(".item").find("[id^='info']").hide();
});

如果要保留原ID逻辑，也可以借助Owl Carousel的初始化回调重新绑定事件（但仍需注意ID重复问题）：

$('.owl-carousel').owlCarousel({
    // 你的轮播配置（示例）
    loop: true,
    margin: 10,
    nav: true,
    // 轮播初始化完成后绑定事件
    onInitialized: function() {
        $(".hover-img").hover(function(){    
            var id = $(this).data("id");   
            var infoId="#info"+id;   
            $(infoId).css('display','block');
        },function(){
            var id = $(this).data("id");
            var infoId="#info"+id;
            $(infoId).css('display','none');
        })
    }
});

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