Jquery 动态创建鼠标悬停效果

我正在创建一个照片库，其中可以包含随机数量的画廊项目。 代码如下所示：

<div class="gallery-item">
   <div id="gal-img1"><a href=""><img src="15.jpg"></a></div>
   <div class="gal-desc" id="gal-desc1"><h5>Title</h5></div>
</div> 
.........

<div class="gallery-item">
   <div id="gal-imgn"><a href=""><img src="15.jpg"></a></div>
   <div class="gal-desc" id="gal-descn"><h5>Title</h5></div>
</div> 

我用$（“div[id^=gal img]”）获得的画廊项目的最大数量。长度，但从这里开始，我被卡住了

你们能不能给我一个主意我该往哪个方向走

---

谢谢。

我不确定我是否理解这个问题，也许你正在寻找一些css？比如：

.gallery-item > div:first-child:hover{display:block;}

---

我不确定我是否理解这个问题，也许你正在寻找一些css？比如：

.gallery-item > div:first-child:hover{display:block;}

---

您可以通过使用与获取正确元素数相同的选择器来定位所有元素，然后在函数中使用上下文仅定位悬停元素父级

中的
.gal desc
元素。库项目
等：

$("div[id^=gal-img]").on('mouseenter', function() {
    $(this).closest('.gallery-item').find('.gal-desc').show();
});

或在鼠标上切换可见性输入/离开

$("div[id^=gal-img]").on('mouseenter mouseleave', function(e) {
    $(this).closest('.gallery-item').find('.gal-desc').toggle(e.type=='mouseenter');
});

您可以通过使用与获取正确元素数相同的选择器来定位所有元素，然后在函数中使用上下文仅定位悬停元素父级
中的
.gal desc
元素。库项目
等：

$("div[id^=gal-img]").on('mouseenter', function() {
    $(this).closest('.gallery-item').find('.gal-desc').show();
});

或在鼠标上切换可见性输入/离开

$("div[id^=gal-img]").on('mouseenter mouseleave', function(e) {
    $(this).closest('.gallery-item').find('.gal-desc').toggle(e.type=='mouseenter');
});

使用事件委派，该委派可在jQuery中使用$.on获得。将所有.gallery项目包装在一个容器中，使其像下面使用.gallery时所做的那样工作。这将允许无限数量的.gallery项目，而且性能非常好

<div class="gallery">
    <div class="gallery-item">
        <div id="gal-imgn"><a href=""><img src="15.jpg"></a></div>
        <div class="gal-desc" id="gal-descn"><h5>Title</h5></div>
    </div> 
    .....
</div>
.....
$('.gallery').on('mouseenter mouseleave', '.gallery-item', function (e) {
    if (e.type === 'mouseenter') {
        $(this).find('.gal-desc').show();
    }
    else {
        $(this).find('.gal-desc').hide();
    }
});


标题
.....
.....
$（'.gallery'）.on（'mouseenter mouseleave'，'.gallery项'，函数（e）{
如果（e.type==='mouseenter'）{
$（this.find（'.gal desc'）.show（）；
}
否则{
$（this.find（'.gal desc'）.hide（）；
}
});
使用事件委派，该委派可在jQuery中使用$.on获得。将所有.gallery项目包装在一个容器中，使其像下面使用.gallery时所做的那样工作。这将允许无限数量的.gallery项目，而且性能非常好

<div class="gallery">
    <div class="gallery-item">
        <div id="gal-imgn"><a href=""><img src="15.jpg"></a></div>
        <div class="gal-desc" id="gal-descn"><h5>Title</h5></div>
    </div> 
    .....
</div>
.....
$('.gallery').on('mouseenter mouseleave', '.gallery-item', function (e) {
    if (e.type === 'mouseenter') {
        $(this).find('.gal-desc').show();
    }
    else {
        $(this).find('.gal-desc').hide();
    }
});


标题
.....
.....
$（'.gallery'）.on（'mouseenter mouseleave'，'.gallery项'，函数（e）{
如果（e.type==='mouseenter'）{
$（this.find（'.gal desc'）.show（）；
}
否则{
$（this.find（'.gal desc'）.hide（）；
}
});
更改

<div id="gal-imgn">

此外，您还可以像这样添加鼠标输出：

$(".gal-img").mouseover(function(){  
    $(this).next(".gal-desc").show(); 
}).mouseout(function(){
    $(this).next(".gal-desc").hide();
}; 

为了好玩，这里有一堆（低效的）代码
 变化

<div id="gal-imgn">

此外，您还可以像这样添加鼠标输出：

$(".gal-img").mouseover(function(){  
    $(this).next(".gal-desc").show(); 
}).mouseout(function(){
    $(this).next(".gal-desc").hide();
}; 

为了好玩，这里有一堆（低效的）代码
 你走错了路，——>你走错了路，——>坦白地说。。。如果css比jquery代码更简单，我会优先选择它。。。我只想让那些名为gal desc的描述div显示在任何库项mouseover eventTry上。库项：hover>div+div{display:block；}。。。如果css比jquery代码更简单，我会优先选择它。。。我只想让那些名为gal desc的描述div显示在任何库项mouseover eventTry上。库项：hover>div+div{display:block；}使用此方法会产生巨大的性能成本（将单个事件处理程序绑定到可能的100个项上），并且不允许动态插入DOM。有趣的是，我明白你的观点，我想我是为了一个小的内部空间而开发的，所以我不太考虑性能。我喜欢Brians的解决方案。但是Brian，你没有制作一个很好的JSFIDLE来演示你的解决方案。使用这种方法会带来很高的性能成本（将单个事件处理程序绑定到可能的100个项），并且不允许动态DOM插入。有趣的是，我明白你的观点Brian，我想我是为了一个小的内部空间而开发的，所以我不太考虑性能。我喜欢Brians的解决方案。但是Brian，你没有很好地演示你的解决方案。谢谢你。。。那正是我想要的谢谢你。。。这正是我想要的查看你的代码我认为它与上面的代码相同。。。代码对我很好。。。谢谢，不完全一样。这一个使用事件委托。查看您的代码，我认为它与上面的代码相同。。。代码对我很好。。。谢谢，不完全一样。这一个使用事件委托。