Question

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

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

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

bottom: 0px;

只要鼠标位于.bottom-panel内的任何位置，

并在页面上保持“扩展”

有人可以给我一些片段或指示来帮助我实现这个目标吗？

Answer 1

首先，您可以确保jQuery的标准悬停适用于您：

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

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

如何使用hoverintent显示面板

1 个答案: