如何在父div的鼠标悬停上显示子div [英] How to show the child div on mouse hover of parent div
问题描述
我有一些父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隐藏子元素
使用 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!