Repeating divs, how to specify only current hovered div

JavaScript
1

Hi all,

I am displaying a gallery, each image is contained within a div with a class of thumb, within this there is a caption div. I have it set up so that when the users hovers their mouse over the .thumb div, the caption displays.

The problem is, when the mouse is hovered over one of the gallery images, all of the captions display for every single image of the gallery. How can I target only the current hovered item?

This is the code I am using currently:

HTML Repeated for each image


<div class="thumb gThumb">
	<a href="URL">
		<div class="captionContainer">
			<div class="caption">
				<h2>IMG TITLE</h2>
				<p>Summary</p>
			</div><!--caption-->
		</div><!--captionContainer-->
		<img width="226" height="185" src="URL" class="attachment-thumbnail wp-post-image" alt="" /> 
	</a>
</div><!--thumb-->
	    	<div class="thumb gThumb">
	<a href="URL">
		<div class="captionContainer">
			<div class="caption">
				<h2>IMG TITLE</h2>
				<p>Summary</p>
			</div><!--caption-->
		</div><!--captionContainer-->
		<img width="226" height="185" src="URL" class="attachment-thumbnail wp-post-image" alt="" /> 
	</a>
</div><!--thumb-->



$('#gallery-thumbs .thumb a').on('mouseenter', function() {
	$(this).next($('.caption').css('display','inline-block'));
		}
),
$('#gallery-thumbs .thumb a').on('mouseleave', function() {
	$(this).next($('.caption').css('display','none'));
		}
);

Many thanks

2

Carried on playing around and think I got it working with:


$('#gallery-thumbs .thumb a').on('mouseenter', function() {
	$(this).find('.caption').css('display','inline-block'); 
}),
$('#gallery-thumbs .thumb a').on('mouseleave', function() {
	$(this).find('.caption').css('display','none');
});
3

Also cleaned it up slightly with:


$('#gallery-thumbs .thumb a').on('hover', function() {
	$(this).find('.caption').fadeToggle(200); 
});