CODEWITHSUNDEEP
javascriptjquerycsscss-selectors
Dan
Dan

Reputation: 2174

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

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?

Upvotes: 8

Views: 16713

Answers (8)

Akabr Amani
Akabr Amani

Reputation: 13

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

Upvotes: 0

jezzipin
jezzipin

Reputation: 4254

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/

Upvotes: 3

PSR
PSR

Reputation: 40358

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

Upvotes: 4

Mr. Alien
Mr. Alien

Reputation: 157424

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

Upvotes: 20

bipen
bipen

Reputation: 36551

you don't need document.ready function inside document.ready..

try this

  $(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 toggle all div with class hotqcontent..(which i think you don't need this) anyways if you want to toggle that particular div then use this reference to toggle that particular div

updated

you can use on delegated event 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(); 
       });
    });

Upvotes: 1

Anton
Anton

Reputation: 32591

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

JSFIDDLE

Upvotes: 1

devnull69
devnull69

Reputation: 16584

With .hotqcontent you are selecting every element with this class. But you want to select only the .hotqcontent element underneath the parent.

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

Upvotes: 1

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

You can use css for this,

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

Upvotes: 3

Related Questions