Question

I have a hidden div with class hidden_thing that is positioned in the center of an image and then hidden using CSS visibility. I can switch it to visible with the following jQuery, but I have many images on the page with the same class cat_image_table. So how do I select on the currently rolled over image?

<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

There needs to be some sort of structural relationship between each cat_image_table and its associated hidden_thing for this to be possible.

Say hidden_thing were a child of the cat_image_table then you could do something like:

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

(It would help to post an example of your markup)