SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Repeating divs, how to specify only current hovered div

    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
    HTML Code:
    <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-->
    Code:
    $('#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. #2
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Carried on playing around and think I got it working with:

    Code:
    $('#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. #3
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also cleaned it up slightly with:

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •