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 {{1}我使用parent_div取消隐藏元素。

display: block;

Demo

Answer 2

试试这个

$(document).ready(function() {
  $('.parent_div').hover(function() { 
    alert("hello");
    $(this).find('.hotqcontent').toggle(); 
  });
});

或者

$(function() {
  $('.parent_div').hover(function() { 
    alert("hello");
    $(this).find('.hotqcontent').toggle(); 
  });
});

Answer 3

你可以使用css，

.parent_div:hover .hotqcontent {display:block;}

Answer 4

这可以用纯css完成（我添加了几个位，只是为了让它更适合JSFIDDLE）：

    .parent_div{height: 50px;background-color:#ff0000;margin-top: 10px;}
    .parent_div .hotqcontent {display: none;}
    .parent_div:hover .hotqcontent {display:block;}

如果用户禁用了Javascript，这将确保您的网站仍然以相同的方式运行。

演示： http://jsfiddle.net/jezzipin/LDchj/

Answer 5

您不需要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

Answer 6

$(document).ready(function(){
    $('.parent_div').on('mouseover',function(){
        $(this).children('.hotqcontent').show();
    }).on('mouseout',function(){
        $(this).children('.hotqcontent').hide();
    });;
});

JSFIDDLE

Answer 7

使用.hotqcontent，您正在选择此类的每个元素。但是您只想选择父级下面的.hotqcontent元素。

$('.hotqcontent', this).toggle();

Answer 8

你可以试试这个：

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);
    }
    );
});

}）;

如何在父div的鼠标悬停上显示子div

8 个答案: