问题描述
我有许多父 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 */ }
演示