Javascript 将jQuery悬停在克隆项上
我得到了一些如下的HTML结构:Javascript 将jQuery悬停在克隆项上,javascript,jquery,html,css,jquery-hover,Javascript,Jquery,Html,Css,Jquery Hover,我得到了一些如下的HTML结构: <div id="mobileWrapper" class="ios"> <div class="hoverWrapper"> <div class="acvCouponPreviewWrap clearfix"> <div class="previewLeft"> <span class="previewLeftInner"&
<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
之外。当您移动鼠标时,脚本检测到您不再在其上悬停,因此它将删除克隆。然后它检测到你再次悬停,所以它再次插入它,然后再次检测它,依此类推
您所要做的就是将克隆插入包装器中
hoveredItem.before(cloneItem);
//change to this line
hoveredItem.append(cloneItem);
闪烁的原因是,一旦显示克隆的项目,就会悬停在原始项目之外。然后克隆人消失了,你又在里面盘旋了 您可以通过更改代码来解决此问题,以便
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);
});
});
$(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);
});
});