Question

我有一个隐藏的div，类hidden_thing位于图像的中心，然后使用CSS可见性隐藏。我可以使用以下jQuery将其切换为可见，但我在页面上有许多具有相同类cat_image_table的图像。那么如何选择当前翻转的图像呢？

<script type="text/javascript">
$(document).ready(function(){  
    $('.cat_image_table').on("mouseenter", function(){
        $('.hidden_thing').fadeIn(300)
    });

    $('.cat_image_table').on("mouseleave", function(){
        $('.hidden_thing').fadeOut('slow')
    });
});
</script>

CSS：

.cat_image_table {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width:255px;
    margin:0;
    padding:0;
    border-spacing:0;
    border:none;
    height:300px;
    overflow:hidden;
}

.hidden_thing {
   position: absolute;
   top: 130px;
   left: 50px;
   width:150px;
   height:30px;
   background: #EE1B2C;
   padding-top:5px;
   color:white;
   font-family:allerBold;
   font-size:20px;
   visibility:hidden;
}

PHP：

<div class="cat_image_table">

    <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES_CAT . $listing['products_image'], $listing['products_name'], 255, 340, 'class="cat_image_round"') . '</a>

</div>

<div class="hidden_thing">Click to View</div>

</div>

Answer 1

尝试$（this）。

$(document).ready(function(){  
    $('.cat_image_table').on("mouseenter", function(){
        $(this).find('.hidden_thing').show();
    });
});

此外，使用方法.show()和.hide()来显示和隐藏元素。它将规范浏览器的可见性，从而为您的任务提供更有效的方法。

Answer 2

每个cat_image_table及其关联的hidden_thing之间需要存在某种结构关系才能实现这一点。

说hidden_thing是cat_image_table的孩子，那么你可以这样做：

$(document).ready(function(){  
    $('.cat_image_table')
        .on("mouseenter", function(){
            $(this).find('.hidden_thing').fadeIn(300);
        })
        .on("mouseleave", function(){
            $(this).find('.hidden_thing').fadeOut('slow');
        });
});

（发布标记示例会很有帮助）

使div只显示在许多图像翻转中的一个

2 个答案: