Question

我对jQuery有点新鲜。当用户将鼠标悬停在代表库存项目的元素之一时，我正在使用hovercard插件（http://designwithpc.com/Plugins/Hovercard）来调出交互式对话框模式。通过将z-index设置为200来覆盖页面上的其他元素，从而产生悬浮卡。

当我进展得足够慢时这很好用，但是当我将鼠标拉得太快太多时，前一个元素的z-index会被卡在200而不会重置为0.

hoverbox应该是什么样的（当悬停在第46项上时）： enter image description here

当移动太快时，hovercard的样子： enter image description here

我查看了hoverbox的源代码，找到了重置z-index的位置，并尝试修改stop方法值，认为该方法在重置z-index之前等待动画完成，但这对于解决问题。

第187-199行（完整来源：http://dl.dropboxusercontent.com/u/40036711/jquery.hovercard.js）

function () {
                //Undo the z indices 
                $this = $(this);

                $this.find(".hc-details").eq(0).stop(true, true).fadeOut(300, function () {
                    $this.css("zIndex", "0");
                    obj.css("zIndex", "0").find('.hc-details').css("zIndex", "0");

                    if (typeof options.onHoverOut == 'function') {
                        options.onHoverOut.call(this);
                    }
                });
            }

我页面的相关来源：

HTML：

  <div class="users_current_inventory col-xs-1 col-sm-1 col-md-1 col-lg-1 item-thumbnail" id="users_current_inventory_32">32
  </div>
  <div class="users_current_inventory col-xs-1 col-sm-1 col-md-1 col-lg-1 item-thumbnail" id="users_current_inventory_40">40
  </div>
  <div class="users_current_inventory col-xs-1 col-sm-1 col-md-1 col-lg-1 item-thumbnail" id="users_current_inventory_45">45
  </div>
  <div class="users_current_inventory col-xs-1 col-sm-1 col-md-1 col-lg-1 item-thumbnail" id="users_current_inventory_46">46
  </div>
  <div class="users_current_inventory col-xs-1 col-sm-1 col-md-1 col-lg-1 item-thumbnail" id="users_current_inventory_47">47
  </div>
  <div class="users_current_inventory col-xs-1 col-sm-1 col-md-1 col-lg-1 item-thumbnail" id="users_current_inventory_48">48
  </div>
  <div class="users_current_inventory col-xs-1 col-sm-1 col-md-1 col-lg-1 item-thumbnail" id="users_current_inventory_49">49
  </div>
  <div class="users_current_inventory col-xs-1 col-sm-1 col-md-1 col-lg-1 item-thumbnail" id="users_current_inventory_50">50
  </div>
  <div class="users_current_inventory col-xs-1 col-sm-1 col-md-1 col-lg-1 item-thumbnail" id="users_current_inventory_51">51
  </div>
  <div class="users_current_inventory col-xs-1 col-sm-1 col-md-1 col-lg-1 item-thumbnail" id="users_current_inventory_52">52
  </div>
  <div class="users_current_inventory col-xs-1 col-sm-1 col-md-1 col-lg-1 item-thumbnail" id="users_current_inventory_53">53
  </div>

jQuery和Hovercard：

$(document).ready(function() {

    var hoverHTMLDemoBasic = '<p>sup</p>'

    $(".users_current_inventory")
    .hovercard({
      detailsHTML: hoverHTMLDemoBasic,
        openOnBottom: true,
        width: 500,
        cardImgSrc: 'http://ejohn.org/files/short.sm.jpg'
    });
});

我对此问题有一些额外的想法：

我正在使用一个在库存元素之间共享的类，所以怪癖可能来自那个（虽然我转而使用ids 每个元素作为测试，问题仍然存在）。
我需要使用插件，例如hoverIntent
（http://cherne.net/brian/resources/jquery.hoverIntent.html）到
防止起泡。
我需要以某种方式找到元素id并将hovercard应用于 id而不是共享类。（我知道我可以找到父类然后执行this.id找到悬停在上面的元素的id，但是我不确定如何在没有第一次调用的情况下找到元素的id .mouseenter，.mouseover或.hover）。

任何帮助/见解都将 GREATLY 赞赏！

Answer 1

所以这很奇怪，代码方面似乎正在做正确的事情，尽管这个函数可能运行得不够快，无法赶上。我还怀疑.stop()函数可能正在做一些未知但我甚至都不知道的黑魔法。

无论如何，只是在发布悬停时立即取消设置z-index并让其余的功能仍然可以正常运行。

方便的链接： http://jsfiddle.net/KAgu7/1/

相关行：

// ...Line 188

    //Undo the z indices 
    $this = $(this);

    //this is where I unset the z-index
    $this.css('z-index','');


    $this.find(".hc-details").eq(0).stop(true, true).fadeOut(300, function () {
        $this.css("zIndex", "0");
        obj.css("zIndex", "0").find('.hc-details').css("zIndex", "0");

        if (typeof options.onHoverOut == 'function') {
            options.onHoverOut.call(this);
        }
    });
});
// .. Line 198 ( now 199 )

对于hovercard框，z-index在mouseleave上没有重置为0

1 个答案: