不了解 Jquery Hover [关闭]

Posted 2023-05-08

【中文标题】不了解 Jquery Hover [关闭]

【英文标题】：Not Understanding Jquery Hover [closed]

【发布时间】：2012-09-28 03:38:10

【问题描述】：

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

【问题讨论】：

你为什么要添加两次相同的课程？

已编辑：抱歉。它本来是配置文件的内部配置文件。

【参考方案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-shim 来补充基于 CSS 的方法，而不是使用 jQuery 的悬停。此方法一直有效到 MSIE4。

【讨论】：

嗯，jQuery().hover() 兼容所有相关市场份额的浏览器，包括 IE6，可能还有 5。

@Christian - 有时底层的 mouseover/mouseout 事件会丢失，尤其是在窗口边缘附近。这可能会导致基于 Javascript 的悬停功能以基于 CSS 的方法不会卡住的方式卡住。

@geocar 感谢您的及时回复并编辑初始答案以适应我的错误。我会尽快试试这个！

【参考方案2】：

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

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

应该做的工作

【参考方案3】：

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

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

Live demo

【讨论】：

感谢现场演示和解释。很棒的网站，我需要收藏它！