javascript 如何在父 div 的鼠标悬停时显示子 div

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

提问by Dan

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.

我有许多父 div (.parent_div)，每个都包含一个子 div (.hotqcontent)，我使用循环从我的数据库输出数据。

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.

我想要实现的是当用户将鼠标悬停在父 div 上时，应该显示其中包含的子 div 的内容。

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

为了实现这一点，我编写了以下 jQuery 脚本，但它似乎不起作用。它甚至没有显示警报！

<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?

如何修改或替换现有代码以获得所需的输出？

回答by Mr. Alien

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

如果你想要纯 CSS，那么你可以这样做......

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

在下面的 CSS 中，在初始化/页面加载时，我使用display: none;和 然后隐藏hover父元素的子元素，比如说有一个classparent_div, 我display: block;用来取消隐藏元素。

.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

演示

回答by PSR

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

回答by Sameera Thilakasiri

You can use css for this,

您可以为此使用 css，

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

回答by jezzipin

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):

这可以用纯 css 来完成（我添加了几位只是为了让 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.

如果用户禁用了 Javascript，这将确保您的站点仍然以相同的方式运行。

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

演示：http: //jsfiddle.net/jezzipin/LDchj/

回答by devnull69

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

随着.hotqcontent你选择这个类的每个元素。但是您只想选择.hotqcontent父级下方的元素。

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

回答by bipen

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

你不需要document.ready里面的功能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 thisreference to toggle that particular div

是的，hotqcontent如果您想切换该特定 div 然后使用this引用切换该特定 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(); 
       });
    });

回答by Anton

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

JSFIDDLE

JSFIDDLE

回答by akbar amani

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