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

时间:2013-05-10 09:56:48

标签: javascript jquery css css-selectors

我有许多父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>

如何修改或替换现有代码以获得所需的输出?

8 个答案:

答案 0 :(得分:19)

如果你想要纯CSS而不是像你这样做....

在下面的CSS中,在初始化/页面加载时,我使用display: none;隐藏子元素,然后在父元素的hover上隐藏,比如说class {{1}我使用parent_div取消隐藏元素。

display: block;

Demo

答案 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,这将确保您的网站仍然以相同的方式运行。

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

答案 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();
    });;
});

JSFIDDLE

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

});