8

我有许多父 div (.parent_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>

如何修改或替换现有代码以实现所需的输出？

4

8 回答 8

20

如果你想要纯 CSS，那么你可以这样做......

在下面的 CSS 中，在初始化/页面加载时，我使用父元素隐藏子元素display: none;，然后使用hover父元素隐藏子元素，比如说有一个class parent_div，我display: block;用来取消隐藏元素。

.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 */
}

演示

于 2013-05-10T09:59:34.867 回答
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(); 
  });
});
于 2013-05-10T09:58:24.847 回答
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/

于 2013-05-10T10:15:03.573 回答
3

您可以为此使用 css，

.parent_div:hover .hotqcontent {display:block;}
于 2013-05-10T09:59:38.573 回答
1 
$(document).ready(function(){
    $('.parent_div').on('mouseover',function(){
        $(this).children('.hotqcontent').show();
    }).on('mouseout',function(){
        $(this).children('.hotqcontent').hide();
    });;
});

JSFIDDLE

于 2013-05-10T09:59:19.977 回答
1

随着.hotqcontent你选择这个类的每个元素。但是您只想选择.hotqcontent父元素下方的元素。

$('.hotqcontent', this).toggle();
于 2013-05-10T10:00:12.817 回答
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(); 
       });
    });

是的，你的代码将切换所有带有类的 div hotqcontent..（我认为你不需要这个）无论如何，如果你想切换那个特定的 div 然后使用this引用来切换那个特定的 div

更新

您可以在委托事件上使用动态生成的元素

$(function() {  //<--this is shorthand for document.ready
        $('.content').on('mouseenter','.parent_div',function() { 
             alert("hello");
             $(this).find('.hotqcontent').toggle(); 
             //or
            $(this).children().toggle(); 
       });
    });
于 2013-05-10T09:58:32.447 回答
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);
    });
  });
});
于 2013-05-10T10:13:34.283 回答