jQuery悬停克隆项目答案

【问题标题】：jQuery hovering a cloned itemjQuery悬停克隆项目
【发布时间】：2013-11-05 14:10:58
【问题描述】：

我得到了一些这样的 HTML 结构：

<div id="mobileWrapper" class="ios">
    <div class="hoverWrapper">
        <div class="acvCouponPreviewWrap clearfix">
            <div class="previewLeft">
                 <span class="previewLeftInner"> 10% </span>
            </div>
            <div class="previewRight">
                 <span class="previewUser"> Some Text here </span>
            </div>
        </div>
        <!-- clone will placed here -->
    </div>
    <div class="hoverWrapper">
        <div class="acvCouponPreviewWrap clearfix">
            ...
        </div>
        <!-- clone will placed here -->
    </div>
    <div class="hoverWrapper">
        <div class="acvCouponPreviewWrap clearfix">
            ...
        </div>
        <!-- clone will placed here -->
    </div>
</div>

现在，当我悬停.hoverWrapper 项目时，我想克隆悬停的项目并将其放在悬停的项目上更大。好的，到目前为止，这是有效的。这里的问题是悬停时的闪烁效果。一些帮助将是优雅的！

http://jsbin.com/oJeDUmU/2/edit

我试过了，但不是我想要的：

if ($(this).parent().find('.hoverWrapper')) {
    if ($(this).find('.previewActive')) {
        return false;
   }
}

【问题讨论】：

标签： javascript jquery html css jquery-hover

【解决方案1】：

这是因为您将克隆项目插入到 .hoverWrapper 之外。在您移动鼠标的那一刻，脚本会检测到您不再将鼠标悬停在它上面，因此它会删除克隆。然后它检测到您再次悬停，因此它再次插入它，然后再次检测到它，依此类推。

您所要做的就是将克隆插入包装器中。

hoveredItem.before(cloneItem);
//change to this line
hoveredItem.append(cloneItem);

http://jsbin.com/oJeDUmU/4/edit

【讨论】：

【解决方案2】：

闪烁的原因是，一旦您显示克隆的项目，您就会将鼠标悬停在原始项目之外。然后克隆消失了，你再次悬停在其中。

您可以通过更改代码来解决此问题，以便 mouseenter 原始元素但 mouseleave 克隆：

$(document).ready(function () {

    $("div.hoverWrapper").on('mouseenter', function () {
        console.log('enter');
        var hoveredItem = $(this);
        var position = hoveredItem.offset().top - $('#mobileWrapper').offset().top - hoveredItem.height() / 2;

        var cloneItem = $(this)
            .clone()
            .addClass('previewActive')
            .css('top', position)
            .css('left', '-34px')
            .on('mouseleave', function () {
                console.log('leave');
                $(this).fadeOut(300, function () {
                    $(this).remove();
                });
                $(this).remove();
            });
        $('#mobileWrapper').find('.previewActive').remove(); // remove other boxes
        hoveredItem.before(cloneItem);
    });

});

http://jsbin.com/oJeDUmU/16/edit

【讨论】：