Question

<ul>
   <li class="hoverMe"><div class="secret">Haha</div></li>
   <li class="hoverMe"><div class="secret">Blabla</div></li>
   <li class="hoverMe"><div class="secret">Tada</div></li>
</ul>

隐藏的div隐藏在css中：

.secret {
   display: none;
}

我希望在悬停“hoverMe”之后显示“hoverMe”的秘密孩子（所以当用户悬停第一个链接时，他看到“哈哈”，nubmer两个“Blabla”等。）

我已经尝试过这段代码，但它不起作用。我一直在尝试用“child（ren）”等替换“next”，但没有。有什么想法吗？

 jQuery().ready(function() {

                jQuery('.hoverMe').hover(function(){
                    jQuery(this).next('.secret').Toggle();
                });
            });

奇怪的是（这个）.children（）切换所有孩子，但当我尝试使用（this）.children（'.secret'）时，它没有做任何事情。

Answer 1

hover()可以绑定两个处理程序：

$('.hoverMe').hover(function(){
  $(this).children().show();
}, function(){
  $(this).children().hide();
})

或

$('.hoverMe').hover(function(){
  $(this).find('.secret').show();
}, function(){
  $(this).find('.secret').hide();
})

或者，正如@Felix Kling注意到的那样，它只能绑定一个句柄：

$('.hoverMe').hover(
  $(this).find('.secret').toggle();
)

Answer 2

当.hoverme未显示时，.secret为空（高度为0），因此没有任何内容可以悬停。

您需要使用visibility: hidden / visibility: visible代替

.secret {
    visibility:hidden;
}

jQuery().ready(function() {
  $(".hoverMe").hover(function () {
    $(this).find(".secret").css("visibility", "visible");
  }, function () {
    $(this).find(".secret").css("visibility", "hidden");
  });
});

示例：http://jsfiddle.net/bM7f2/

Answer 3

http://api.jquery.com/children/

jQuery(this).children('.secret')[0]

哦，你试过了。没关系。

Answer 4

使用children。
toggle需要以小写字母开头。
重要提示：您需要列表元素中的其他“可见”内容。否则它占用没有空间并且没有什么可以悬停在上面。至少你必须添加 。正如您在演示中看到的那样，我添加了这些内容。如果你删除它，它将不再起作用。

所以它应该是：

jQuery('.hoverMe').hover(function(){
    jQuery(this).children('.secret').toggle();
});

你的准备好的处理程序也是错误的，必须是：

jQuery(document).ready(function() {
    //...
});

DEMO

Answer 5

$(function(){
    $("ul li.hoverMe").hover(function(){
        $(this).children("div.secret").show();
    },
    function(){
        $(this).children("div.secret").hide();
    });
});

Answer 6

jQuery().ready(function() {
                jQuery('.hoverMe').hover(function(){
                    jQuery(this).children('.secret').**t**oggle();
                });
            });

JS区分大小写

Answer 7

如果它发生在您身上并且似乎没有任何效果，请尝试向链中添加另一个child（），或者至少检查您的标记以确保您的父元素不是真正的GRANDparent。

答案是：

$(this).children().children().show();

jQuery选择这个孩子

7 个答案: