如何使用悬停意图显示面板答案

【问题标题】：How to show panel with hoverintent如何使用悬停意图显示面板
【发布时间】：2009-05-12 19:57:45
【问题描述】：

嗨，这是非常基本的 jQuery 东西，但我有点迷茫。所以我有一个 310px 的图像，大部分是从页面中隐藏的，例如：

.bottom-panel {
    position: fixed;
    width: 874px;
    height: 310px;
    display: block;
    bottom: -300px;
    left: 150px;
    background: url(theimg.png) transparent no-repeat;
}

只有 10 像素高的小标签贴在底部。我正在尝试使用 hoverIntent 插件创建交互性，将鼠标悬停在小标签上会导致 CSS 更改为

bottom: 0px;

只要鼠标在 .bottom-panel 中的任何位置，就在页面上保持“展开”

谁能给我一点sn-p或一些指导来帮助我实现这一目标？

【问题讨论】：

标签： jquery css

【解决方案1】：

首先，您可以确保 jQuery 的标准悬停功能适合您：

$('.bottom-panel').hover(function() {
  $(this).animate({bottom: 0}, 'fast');
}, function() {
  $(this).animate({bottom: -300}, 'fast');
});

一旦你按照你想要的方式工作，你需要做的就是用'hoverIntent'替换'hover'这个词，你应该很高兴。

【讨论】：