0

我环顾四周，基本上住在 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（因为该特定页面上有许多不同成员的个人资料）

4

3 回答 3

3

.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 中使用。

如果你想进一步向后兼容，我建议创建一个行为-shim 来补充基于 CSS 的方法，而不是使用 jQuery 的悬停。此方法一直有效到 MSIE4。

于 2012-10-07T20:06:45.147 回答
0 
 $(document).ready(function()
 {
    $(".profile-actions").hide();

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

应该做的工作

于 2012-10-07T20:11:00.973 回答
0

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

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

现场演示

于 2012-10-07T20:20:29.153 回答