問題描述

我有許多父 div (.parent_div)，每個都包含一個子 div (.hotqcontent)，我使用循環從數據庫中輸出數據.

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 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 的內容.

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.

為了實現這一點，我編寫了以下 jQuery 腳本，但它似乎無法正常工作.它甚至沒有顯示警報！

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?

推薦答案

如果你想要純 CSS，你可以這樣做......

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

在下面的 CSS 中，在初始化/頁面加載時，我使用 display: none; 隱藏子元素，然后在父元素的 hover 上隱藏子元素，比如說有class parent_div，我使用 display: block; 來取消隱藏元素.

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 */
}

演示

這篇關于如何在父div的鼠標懸停時顯示子div的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！