Reputation: 357
I have the following jQuery
$('td a').hover(function(){
$(this).find('div.productPopUp').show();
});
and this HTML
<td>text</td>
<td><a href="#">text</a></td>
<div class="productPopUp">
<h1>text</h1>
<p>blah, blah</p>
</div>
<td>
<td>text</td>
<td><a href="#">text</a></td>
<div class="productPopUp">
<h1>text</h1>
<p>blah, blah</p>
</div>
<td>
I want the jQuery to show only the hovered link, but it does not work. I'm not sure if I am using this in the wrong place or wrong context. (I assumed this, used here referred to what is hovered over?
Can anyone point me in the right direction?
Thanks
Upvotes: 1
Views: 111
Reputation: 318372
First off, you need some valid markup, jQuery can not always find elements in strange invalid markup?
<table>
<tr>
<td>text</td>
<td><a href="#">text</a></td>
<td class="productPopUp">
<h1>text</h1>
<p>blah, blah</p>
</td>
</tr>
<tr>
<td>text</td>
<td><a href="#">text</a></td>
<td class="productPopUp">
<h1>text</h1>
<p>blah, blah</p>
</td>
</tr>
</table>
Then some jQuery, something like this maybe:
$('td a').on('mouseenter mouseleave', function() {
$(this).parent().parent().find(".productPopUp").toggle();
});
And lastly a FIDDLE
Upvotes: 1
Reputation: 177
Maybe this?
$('td a').hover(function(){
$(this).parent().sibling('div.productPopUp').show();
});
Upvotes: 0
Reputation: 87083
$('td a').hover(function(){
$(this).parent().next('div.productPopUp').show();
});
Upvotes: 0