我有许多父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>
如何修改或替换现有代码以获得所需的输出?
答案 0 :(得分:19)
如果你想要纯CSS而不是像你这样做....
在下面的CSS中,在初始化/页面加载时,我使用display: none;
隐藏子元素,然后在父元素的hover
上隐藏,比如说class
{{1}我使用parent_div
取消隐藏元素。
display: block;
答案 1 :(得分:4)
试试这个
$(document).ready(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
或者
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
答案 2 :(得分:3)
你可以使用css,
.parent_div:hover .hotqcontent {display:block;}
答案 3 :(得分:3)
这可以用纯css完成(我添加了几个位,只是为了让它更适合JSFIDDLE):
.parent_div{height: 50px;background-color:#ff0000;margin-top: 10px;}
.parent_div .hotqcontent {display: none;}
.parent_div:hover .hotqcontent {display:block;}
如果用户禁用了Javascript,这将确保您的网站仍然以相同的方式运行。
答案 4 :(得分:1)
您不需要document.ready
内的document.ready
功能..
试试这个
$(function() { //<--this is shorthand for document.ready
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
,是的,您的代码将使用类hotqcontent
来切换所有div ..(我认为您不需要这个),如果您想要切换该特定div然后使用{{1引用切换特定div
<强>更新强>
您可以在委托事件中使用动态生成的元素
this
答案 5 :(得分:1)
$(document).ready(function(){
$('.parent_div').on('mouseover',function(){
$(this).children('.hotqcontent').show();
}).on('mouseout',function(){
$(this).children('.hotqcontent').hide();
});;
});
答案 6 :(得分:1)
使用.hotqcontent
,您正在选择此类的每个元素。但是您只想选择父级下面的.hotqcontent
元素。
$('.hotqcontent', this).toggle();
答案 7 :(得分:0)
你可以试试这个:
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);
}
);
});
});