Question

我在画廊页面中有以下代码来显示我的画廊。

<div id="gallery">
    <?php
    if (!empty($gallery)) {
        foreach ($gallery as $row) {
            ?>
            <div class="album_holders">
                <div class="image_holder">
                    <img src="images/gallery/<?php echo $row['img_name']; ?>" width="150" height="75"/>
                </div>
                <div class="title_holder">
                    <?php echo $row['title']; ?>
                </div>
            </div>
        </div>
        <?php
    }
}
?>
</div>

所以我需要在所有album_holders上添加鼠标动画。当鼠标翻过相册时，我需要使用jquery函数在其下显示相册标题。

这是我的jquery代码

$(".image_holder").on("mouseover", function ()
{
   $(".title_holder").animate({
       "opacity": 1
   },1500,$easing2); 
});

但问题是当我将鼠标移到一张专辑上时，每张专辑都会显示它的名字。怎么能阻止这个。我搜索互联网，发现我必须使用.on功能。或者我仍然使用它仍然显示它的名字。

Answer 1

您可以使用.album_holders获取亲戚this，然后在其中找到.title_holder。

$(".image_holder").on("mouseover", function ()
{
   $(this).closest('.album_holders').find('.title_holder').animate({
       "opacity": 1
   },1500,$easing2); 
});

Answer 2

你可以这样做

$(".image_holder").on("mouseover", function ()
{
   $(this).next(".title_holder").animate({
       "opacity": 1
   },1500,$easing2); 
});

如何使用类名仅在一个元素上运行jquery函数。有更多的元素使用相同的类

2 个答案: