Question

我对此很陌生。我试图通过悬停（鼠标悬停）事件触发的iFrame触发链接预览。

这是迄今为止我所掌握的JSFiddle：https://jsfiddle.net/80so5jyL/

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

我尝试取消绑定mouseover / mouseout事件（注释掉行），并且它可以防止重复问题，但也不允许我再次显示同一个链接，即使在我徘徊之后out，或者通过不同的链接（它仍然允许我这样做）。

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时也不要将其放在a html标记内。将其保存在单独的element中，因为当您使用.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
});

jQuery Mouseover事件正在重复

1 个答案: