[Jquery] Show only current hovered child

JavaScript
1

Hey,

I’ve tried looking for a solution arounf but I’m not quite sure I’m looking for the right ‘term’

the situation is I have a list of things on a page that are dynamically generated and when I hover each of them I’d like a ‘popup’ with more info relative to what is hovered to appear.

I don’t want to have to specify the rul for every popup separately so my question is how do I target a child div to appear for only the hovered element if there are many divs with the same name on the page?

My code:


...
<li>
<h4>&#8226;Title of thing</h4>
<div class="popup">
this is the div i'd like to appear on hover

</div>
</li>

<li>
<h4>&#8226;Title of thing</h4>
<div class="popup">
this is the div i'd like to appear on hover

</div>
</li>

Thanks for looking

2

Since you have the “popup” class on the divs, you could use something like this:


$(function () {
    $('div.popup').each(function () {
        var toggleNext = function () {
            $(this).next().toggle();
        };

        // attach event
        $(this).prev().click(toggleNext);

        // hide once attached
        $(this).hide();
    });
});
3

Sorry I should have been more clear,

When I hover the list element, that’s whn i’d like the ‘popup’ div to appear.

the same way css would show the div on hover;


.popup{display:none;}
li:hover .popup{display:block; position:relative; top:-59px; right:-7px;}

but I’d like to add some animation to it with Jquery

4

In that case, use the hover event instead of the [url=“http://api.jquery.com/click/”]click event, with an animation technique such as [url=“http://api.jquery.com/slideToggle/”]slideToggle.

Sounds simple, right? It is.


function toggleNext() {
    $(this).slideToggle();
}
...
$(this).prev().hover(toggleNext);
...

If you need different separate function to show and hide in different ways, you can give the hover event two separate functions instead.

5

Sorry to bump this. I had found another solution to this at the time but have now run into the problem again on another project.

I can’t really understand where this example should be placed in my code.

This is what I have:
jQuery:



$(function(){
	var offsetX = 20;
	var offsetY = 20;
	$('a.thumb-link').hover(function(e){
		// mouse on		
		$('.preview-image')
		.show()
		.css('top', e.pageY + offsetY )
		.css('left', e.pageX + offsetX )
		.appendTo('body');
	}, function(){
		// mouse off
		$('.preview-image').hide();
		
	});
	$('a.thumb-link').mousemove(function(e){
		$('.preview-image')
		.css('top', e.pageY + offsetY )
		.css('left', e.pageX + offsetX );
	});

});

HTML:


<li class="thumb">
<a class="thumb-link" href="/link/to/imagepage">
<img src="http://www.sitepoint.com/forums/images/cartoons/image1.gif" height="170" alt="caption" /></a>
<div class="preview-image">
<img src="http://www.sitepoint.com/forums/images/cartoons/image1.gif" height="300px" alt="caption" />
<div class="thumb-caption">caption</div>
</div><!-- /.preview-image -->
</li>

<li class="thumb">
<a class="thumb-link" href="/link/to/imagepage">
<img src="http://www.sitepoint.com/forums/images/cartoons/image2.gif" height="170" alt="caption" /></a>
<div class="preview-image">
<img src="http://www.sitepoint.com/forums/images/cartoons/image2.gif" height="300px" alt="caption" />
<div class="thumb-caption">caption</div>
</div><!-- /.preview-image -->
</li>
etc

So my problem;
This works, but obviously is showing every instance of ‘preview-image’ for each thumbnail, so naturally the image last in the list will always display even though the others exist underneith it.

I just can’t work out how to get only the child ‘preview-image’ of the currently hovered parent (‘thumb’) to show

Thanks for looking, again.

[EDIT]
not sure how ‘http://sitepoint got in there…’ you get the idea though

6

You’ll want to use the this keyword as the context for the selector.
See the jQuery() documentation for details on that.

7

Thanks,

I’m a little closer but not sure whats happening now:


$(function(){
	var offsetX = 20;
	var offsetY = -110;
	$('a.thumb-link').mouseenter(function(e){
		// mouse on		
		$(this).next('.preview-image')
		.fadeIn(300)
		.css('top', e.pageY + offsetY )
		.css('left', e.pageX + offsetX )
		.appendTo('body');
	});
	$('a.thumb-link').mouseleave(function(e){
		$('.preview-image')
		.fadeOut(200);		
	});
	
	$('a.thumb-link').mousemove(function(e){
		$('.preview-image')
		.css('top', e.pageY + offsetY )
		.css('left', e.pageX + offsetX );
	});

});

It works per image but after it dissappears it doesn’t come back again…

Any help?

Thanks