Javascript jQuery鼠标悬停事件正在复制

我对这个很陌生。我正试图通过一个iFrame触发一个链接的预览，它是由悬停（mouseover）事件触发的

以下是我到目前为止所掌握的知识：

它第一次工作正常，但当我在链接上来回悬停不止一次时，它会复制显示。如何确保每次只弹出一个iFrame

我尝试解除mouseover/mouseout事件（注释掉的行）的绑定，这样可以防止重复问题，但也不允许我再次在同一链接上显示，即使在我悬停了，或者在不同的链接上显示（它仍然允许我这样做）

HTML:

}`

JS（jQuery）：

$（“a”）.mouseover（函数（）{
var thisURL=$（this.attr（'href'）；
日志（thisURL）；
var theCode='.预览{显示：无；位置：绝对；左边距：0px；z索引：10；边框：1px；实心#000；宽度：100px；高度：100px；}'；
$（this）.append（代码）；
$（this.children（“.preview”）.show（）；
}).mouseout（函数（）{
$（this.children（“.preview”）.hide（）；
//$（this.unbind（'mouseover'）；
返回；
});

---

有什么想法吗？

它之所以发生，是因为你每次都把它附加到这个

上，因此它被复制了。改为使用
.html
，并且在使用
html
时，不要将其放在
此
中，即
标记中。将其保存在单独的
元素中，因为当您使用
.html
时，它将替换内容，
a
标记
文本
将消失

所以我建议使用下面的
html

<a href="http://therainforestsite.com">Some Link</a><br/><br/>
<a href="http://www.example.com">Example Link</a>
<p class="bigPreview"></p>

在
JS

$("a").mouseover(function() {
    var thisURL = $(this).attr('href');
    var theCode = '<style>.preview {display:none;position:absolute;margin-left:0px;z-index:10;border:1px;solid #000;width:100px;height:100px;}</style><iframe class="preview" src="' + thisURL + '"></iframe>';
    $('.bigPreview').html(theCode).show(); //put it into .bigPreview and use .show on it
}).mouseout(function() {
    $('.bigPreview').html('').hide(); //clear its html and hide it
});

$（“a”）.mouseover（函数（）{
var thisURL=$（this.attr（'href'）；
var theCode='.预览{显示：无；位置：绝对；左边距：0px；z索引：10；边框：1px；实心#000；宽度：100px；高度：100px；}'；
$（'.bigPreview'）.html（theCode.show（）；//将其放入.bigPreview并在其上使用.show
}).mouseout（函数（）{
$（'.bigPreview'）.html（'.hide（）；//清除其html并隐藏它
});
我建议使用
mouseenter
和
mouseleave
覆盖
mouseover
和
mouseout
。
$("a").mouseover(function() {
    var thisURL = $(this).attr('href');
    console.log(thisURL);
    var theCode = '<style>.preview {display:none;position:absolute;margin-left:0px;z-index:10;border:1px;solid #000;width:100px;height:100px;}</style><iframe class="preview" src="' + thisURL + '"></iframe>';
    $(this).append(theCode);
    $(this).children(".preview").show();
}).mouseout(function() {
    $(this).children(".preview").hide();
    //$(this).unbind('mouseover');
    return;
});

<a href="http://therainforestsite.com">Some Link</a><br/><br/>
<a href="http://www.example.com">Example Link</a>
<p class="bigPreview"></p>

.bigPreview{
   display:none
}

$("a").mouseover(function() {
    var thisURL = $(this).attr('href');
    var theCode = '<style>.preview {display:none;position:absolute;margin-left:0px;z-index:10;border:1px;solid #000;width:100px;height:100px;}</style><iframe class="preview" src="' + thisURL + '"></iframe>';
    $('.bigPreview').html(theCode).show(); //put it into .bigPreview and use .show on it
}).mouseout(function() {
    $('.bigPreview').html('').hide(); //clear its html and hide it
});