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

Question

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

以下是我当前的标记:

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

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

为了实现这一点，我编写了以下 jQuery 脚本，但它似乎无法正常工作。它甚至没有显示警报!

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

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

Answer 1

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

在下面的 CSS 中，在初始化/页面加载时，我使用 display: none; 隐藏子元素，然后在父元素的 hover 上，假设有一个class parent_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