如何使用jQuery使DIV跳出响应悬停事件(如国家地理站点)?

前端之家收集整理的这篇文章主要介绍了如何使用jQuery使DIV跳出响应悬停事件(如国家地理站点)?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个问题类似于here提出的问题,但情况有所不同.

我正在寻找的功能几乎与National Geographic website相同,其中当悬停在其中一个主链接上时出现“偷看”,并在与其交互时保持可见,或悬停在子菜单上,但在不悬停时消失菜单项,子链接或“偷看”.

当我将鼠标悬停在下面的列表项上时,我想要一个我指定的DIV(在这种情况下通过数字对应 – 但如果数字不存在或者不匹配,我希望能够灵活地单独定义div名称[我正在使用Drupal,一切都是动态生成的])在它下面滑出或者只是出现(列表将是内联的).它需要保持打开状态,以便人们可以单击DIV中显示链接,但是当您从DIV或列表项中鼠标输出时,div需要消失.

我的HTML看起来更像是这样的:

我的CSS看起来像这样:

  1. #switches li {
  2. display: inline-block;
  3. height: 50px;
  4. background-color: #F33;
  5. }
  6. #block-1,#block-2,#block-3,#block-4 {
  7. position: absolute;
  8. top: 50px;
  9. height: 300px;
  10. width: 500px;
  11. background-color: #999;
  12. display: none;
  13. }
  14. #block-1.active,#block-2.active,#block-3.active,#block-4.active {
  15. display: block;
  16. }

而我的jQuery(基于Carl Meyer对另一个主题的回答,我确信我已经非常糟糕)看起来像这样:

  1. $(document).ready(function() {
  2. switches = $('#switches > li');
  3. slides = $('#navigation > div.block');
  4. switches.each(function(idx) {
  5. $(this).data('slide',slides.eq(idx));
  6. }).hover(
  7. function() {
  8. switches.removeClass('active');
  9. slides.removeClass('active');
  10. $(this).addClass('active');
  11. $(this).data('slide').addClass('active');
  12. });
  13. });

我不熟悉这段代码是如何工作的,并且一直试图解决它,但我不确定我是否理解“idx”的使用以及单个“幻灯片”术语是如何发挥作用的.

我是jQuery的新手,并且已经完成了这个项目的任务.我感谢任何帮助,我希望其他人也能发现它有用!

最佳答案
基本上,您应该将弹出窗口嵌套在触发它的元素中,然后使用:hover pseudo-class来显示它.如果你需要在IE6中使用它,你必须附加一些解决方法脚本:hover模拟,但这很容易在网上找到.如果需要转换,请使用具有相同标记的鼠标事件.

示例:http://jsfiddle.net/YNSVj/1/

这是标记

这是CSS:

  1. .item{
  2. float: left;
  3. background: #ffc;
  4. height: 2em;
  5. padding: 5px 15px 0;
  6. border: 1px solid #000;
  7. }
  8. .popup
  9. {
  10. display: none;
  11. position: absolute;
  12. left: 0;
  13. top: 2em;
  14. width: 100%;
  15. margin-top: 17px; /* To compensate for parent block's padding */
  16. color: #fff;
  17. background: #f00;
  18. }
  19. .item:hover .popup
  20. {
  21. display: block;
  22. }

请注意,您必须为菜单项设置显式高度,然后使用弹出块的上边距值进行播放,以便在用户更改字体大小时不会被撕掉.

另外,请记住,这是最简单的解决方案,在某些情况下可能不适用.

猜你在找的jQuery相关文章