Reputation: 1919
I have multiple span
elements having the same prod_desc
class and they are hidden by default. Now I am showing on hover, however, the problem is that all of them shows up!
I want only the element to show on which currently I am hovering. I think I need to use this but I could not figure out how.
Parent element :
<div id="results" style="width: 600px;"></div>
Rendering these element using AJAX into results id element.
<div class="prod" style="position: relative;width: 265px;border: 1px solid black;float: left;margin-right: 20px;margin-bottom: 5px;">
<img src="'.$_product->getImageUrl().'"/>
<span class="prod_desc" style="position: absolute;display:none;">Hello I am descripton span block
</span>
</div>
jQuery:
jQuery("div#results").hover(function(){
jQuery("span.prod_desc").show();
},function(){
jQuery("span.prod_desc").hide();
});
I have also tried this, but it did not work:
jQuery("div#results").hover(function () {
jQuery(this).find("span.prod_desc").show();
}, function(){
jQuery(this).find("span.prod_desc").hide();
});
Upvotes: 1
Views: 2331
Reputation: 1919
This solved my problem
jQuery(document).ajaxComplete(function(){
if(jQuery('.prod').length != 0) {
jQuery(".prod").hover(function(){
jQuery(this).find(".prod_title").hide();
jQuery(this).find(".prod_desc").fadeIn();
},function(){
jQuery(this).find(".prod_desc").fadeOut();
jQuery(this).find(".prod_title_wrap").show();
jQuery(this).find(".prod_title").show();
});
}
I was putting check before the ajax call comes back. So using this I am waiting for it to finish and then implementing further checks. Thanks all for you for looking into it.
Upvotes: 0
Reputation: 104805
If these are dynamically added, try this
jQuery(document).on('hover', '#results', function () {
jQuery("span.prod_desc").show();
}, function(){
jQuery("span.prod_desc").hide();
});
Upvotes: 0
Reputation: 16456
Just use CSS. I believe the issue may be how the elements are being placed on the page and how jQuery events work. Try this with CSS rules and see how that works.
#results .prod_desc {
display: none;
}
#results:hover .prod_desc {
display: block;
}
Upvotes: 1
Reputation: 4430
I want only the element to show on which currently I am hovering.
and then just attach hover function to element you want.
jQuery("span.prod_desc").hover(function(){
jQuery(this).show();
},function(){
jQuery(this).hide();
});
BUT
they are hidden by default.
how do you hovering them ??
Upvotes: 1