CODEWITHSUNDEEP
jqueryhtml
Ricky Sharma
Ricky Sharma

Reputation: 1919

Show a child element on hover, and hide when not hovering

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

Answers (4)

Ricky Sharma
Ricky Sharma

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

tymeJV
tymeJV

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

AlbertEngelB
AlbertEngelB

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

egig
egig

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

Related Questions