Question

我正在创建一个可以包含随机数量的图库项目的照片库。代码如下：

<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>

类'gal-desc'将'display'设置为'none'，并将gal-img（1）设置为gal-img（n）mouseover我想将'display'设置为'block'对应gal-desc（1）到gal-desc（n）。

我可以手动插入以下代码，从1到100可以说，但如果我将获得40个图库项目，我将有60个鼠标悬停不可用。如果我有110个画廊项目，那么10个项目将无法达到预期的效果。

$("#gal-img1").mouseover(function(){  
    $("#gal-desc1").css('display','block'); 
});

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

你能不能请各位给我一个我必须去哪个方向的想法。

谢谢。

Answer 1

我不确定我理解这个问题，也许你正在寻找一些CSS？类似的东西：

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

Answer 2

您可以使用您使用的相同选择器来定位所有元素以获取正确数量的元素，然后在函数使用上下文中仅定位hovered元素内的.gal-desc元素parent {{1等等：

.gallery-item

或在mouseenter / leave

上切换visiblity

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

Answer 3

使用事件委托，使用$ .on在jQuery中可用。将所有.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();
    }
});

Answer 4

变化

<div id="gal-imgn">

到

<div class="gal-img">

然后这样做：

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

另外你可以像这样添加mouseout：

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

这是一个有趣的这个（低效）代码的jsfiddle。 http://jsfiddle.net/d27Nn/1/

动态创建鼠标悬停效果

4 个答案: