How to show child div on mouse hover parent div

Question

I have several parent divs (.parent_div), each of which contains a child div (.hotqcontent), where I output data from my database using a loop.

Below is my current markup:

<div class="content"> <div class="parent_div"> <div class="hotqcontent"> content of first div goes here... </div> <hr> </div> <div class="parent_div"> <div class="hotqcontent"> content of second div goes here... </div> <hr> </div> <div class="parent_div"> <div class="hotqcontent"> content of third div goes here... </div> <hr> </div> <div class="parent_div"> <div class="hotqcontent"> content of fourth div goes here... </div> <hr> </div> </div> 

What I would like to achieve is when the user hovers / ponders the parent div, the contents of the child div contained inside should be open.

For this, I wrote the following jQuery script, but it does not work. He doesn't even show a warning!

 <script> $(document).ready(function() { $(function() { $('.parent_div').hover(function() { alert("hello"); $('.hotqcontent').toggle(); }); }); }); </script> 

How can I change or replace existing code to achieve the desired result?

Answer 1

If you want pure CSS than you can do it like this ....

In the CSS below, when initializing / loading the page, I hide the child using display: none; and then on the hover parent element, say, having class parent_div , I use display: block; for show item.

 .hotqcontent { display: none; /* I assume you'll need display: none; on initialization */ } .parent_div:hover .hotqcontent { /* This selector will apply styles to hotqcontent when parent_div will be hovered */ display: block; /* Other styles goes here */ } 

Demo

Answer 2

try it

 $(document).ready(function() { $('.parent_div').hover(function() { alert("hello"); $(this).find('.hotqcontent').toggle(); }); }); 

or

 $(function() { $('.parent_div').hover(function() { alert("hello"); $(this).find('.hotqcontent').toggle(); }); }); 

Answer 3

You can use css for this,

 .parent_div:hover .hotqcontent {display:block;} 

Answer 4

This can be done using pure CSS (I added a couple of bits to make it a little more suitable for JSFIDDLE):

 .parent_div { height: 50px; background-color:#ff0000; margin-top: 10px; } .parent_div .hotqcontent { display: none; } .parent_div:hover .hotqcontent { display:block; } 

This ensures that your site still functions the same if users have Javascript disabled.

Demo: http://jsfiddle.net/jezzipin/LDchj/

Answer 5

you do not need the document.ready function inside document.ready ..

try it

  $(function() { //<--this is shorthand for document.ready $('.parent_div').hover(function() { alert("hello"); $(this).find('.hotqcontent').toggle(); //or $(this).children().toggle(); }); }); 

, and yes, your code will switch all hotqcontent with the class hotqcontent .. (which, I think, you do not need it), if you want to switch this particular div, use the this link to switch this particular div

updated

you can use for delegated events for dynamically generated elements

 $(function() { //<--this is shorthand for document.ready $('.content').on('mouseenter','.parent_div',function() { alert("hello"); $(this).find('.hotqcontent').toggle(); //or $(this).children().toggle(); }); }); 

Answer 6

 $(document).ready(function(){ $('.parent_div').on('mouseover',function(){ $(this).children('.hotqcontent').show(); }).on('mouseout',function(){ $(this).children('.hotqcontent').hide(); });; }); 

JSFIDDLE

Answer 7

With .hotqcontent you select each element of this class. But you only want to select the .hotqcontent element under the parent element.

 $('.hotqcontent', this).toggle(); 

Answer 8

You can try this:

 jQuery(document).ready(function() { jQuery("div.hotqcontent").css('display','none'); jQuery("div.parent_div").each(function(){ jQuery(this).hover(function(){ jQuery(this).children("div.hotqcontent").show(200); }, function(){ jQuery(this).children("div.hotqcontent").hide(200); }); }); });