javascript - jQuery 鼠标悬停事件正在复制

Question

我对这个很陌生。我正在尝试通过悬停(鼠标悬停)事件触发的 iFrame 触发链接预览。

这是我目前拥有的 JSFiddle:https://jsfiddle.net/80so5jyL/

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

我尝试取消绑定(bind) mouseover/mouseout 事件(注释行)，它可以防止重复问题，但也不允许我再次显示在同一个链接上，即使在我悬停或悬停之后一个不同的链接(它仍然允许我这样做)。

HTML:

<a class="tester" href="http://therainforestsite.com">Link Uno</a>
<a class="tester" href="http://www.example.com">Link Dos</a>

CSS:

.tester { display: block;
margin: 50px;

}`

JS(jQuery):

$("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;
});

有什么想法吗？

Answer 1

它的发生是因为你每次都将它附加到 this 上，因此它会被复制。使用 .html 代替，也不要将它放在 this 内，即当您使用 html 时 a 标签。将它放在一个单独的元素中，因为当您使用.html时，它将替换内容和a标签text会消失的。

所以我建议使用下面的html

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

CSS

.bigPreview{
   display:none
}

在 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
});