Question

我环顾四周，基本上都是在Jquery API页面上生活，但我似乎无法理解如何让某个悬停事件发生。

我有什么：

<div class="profile profile-inner">
<div class="profile-footer">
<ul class="profile-actions">

我想要的是什么：

隐藏了ul类。然后，一旦div类“profile profile-inner”悬停，我希望ul类可见。

注意：

据我所知，我将不得不使用this，因为有许多div类profile profile-inner（因为该特定页面上有许多不同成员的个人资料）

Answer 1

.hover()有两个参数：一个在转换到“悬停状态”时调用的函数，另一个在离开“悬停状态”时调用的函数：

$('.profile.profile-inner').find('ul').hide();
$('.profile.profile-inner').hover(function() {
  $(this).find('ul').show();
}, function() {
  $(this).find('ul').hide();
});

我不建议这样做：根据页面的布局，使用Javascript检测悬停可能不可靠，并且您可能会“陷入”状态。这可能会惹恼用户，幸运的是，您可以单独使用CSS来做您想做的事情：

.profile.profile-inner ul { display: none; }
.profile.profile-inner:hover ul { display: block; }

如果您的外部元素是<a>标记，这甚至可以在MSIE6中使用。

如果你想进一步向后兼容，我建议创建一个behavior - 垫片来补充基于CSS的方法，而不是使用jQuery的悬停。这种方法可以一直回到MSIE4。

Answer 2

 $(document).ready(function()
 {
    $(".profile-actions").hide();

    $(".profile-inner").hover(function()
    {
        $(".profile-actions").show();   
    }, function()
        {
          $(".profile-actions").hide();
        });     
});

应该做的工作

Answer 3

你不需要JavaScript（或jQuery），只需使用css：

profile-inner:hover .profile-actions{ display:block; }

Live demo

不了解Jquery Hover

3 个答案: