How to show the child div on mouse hover of parent

问题:

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?

回答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

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

回答3:

You can use css for this,

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

回答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/

回答5:

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

回答6:

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

JSFIDDLE

回答7:

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

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

});