How to show the child div on mouse hover of parent div

Question

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

The following 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 a user hovers / mouseovers a parent div, the contents of the child div contained within should be revealed.

To achieve this I wrote the following jQuery script but it doesn't appear to be working. It's not even showing the alert!

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

How can I modify or replace my existing code to achieve the desired output?

Solution 1

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

In the CSS below, on initialization/page load, I am hiding child element using display: none; and then on hover of the parent element, say having a class parent_div, I use display: block; to unhide the element.

.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

Solution 2

Try this

$(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(); 
  });
});

Solution 3

You can use css for this,

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

Solution 4

This can be done with pure css (I've added a couple of bits in just to make it a bit neater for the JSFIDDLE):

.parent_div {
    height: 50px;
    background-color:#ff0000;
    margin-top: 10px;
}

.parent_div .hotqcontent {
    display: none;
}

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

This will ensure that your site still functions in the same way if users have Javascript disabled.

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

Solution 5

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

JSFIDDLE

View more solutions

Comments

[Benjamin Gruenbaum]

This is probably the better approach since it's a representation issue. Moreover, this is not susceptible to issues like the DOM state by design.

[Dan]

I tested, but its not showing the hotqcontent div on mouse over the parent div. Why? Please help

[Dan]

I tried but its not giving an alert also on mouse over the parent div . i am using code.jquery.com/jquery-1.9.1.min.js

[Dan]

you are very helpful and kind person. As a human being this is very important. I assume people who reads this comment also help other developer likewise.