Question

我的页面中有一个iFrame，在我的iFrame中，我有2个div，我想在显示哪个div时替换它。

我想把它设置为s.t.当鼠标悬停在（或刚刚进入）iFrame上时，我会使用<div>显示id='note'，当鼠标离开iFrame时，我想显示<div> id='preview'但我的jQuery监听器并不像我喜欢的那样表现。这是我的js代码，

function showNotePreview(showPreview){
    console.log('mouse action detected with show prev of', showPreview);
    if (showPreview){
        $('#preview').removeClass('collapse');
        $('#note').addClass('collapse');
    }else{
        $('#note').removeClass('collapse');
        $('#preview').addClass('collapse');
    }
}



$(document).ready(function(){
    // debugger;
    $('html,body').mouseover(showNotePreview(true));
    $('html,body').mouseout(showNotePreview(false));
});

这是我的HTML，

       <textarea id="note" class="note" name="note_content"></textarea>
       <div class="collapse" id="preview">hi im a preview...</div>

当页面首次加载并且我逐步完成鼠标悬停时正在执行的mouseenter行（在chrome中）我看到自动执行了回调函数，但是没有持续的＆＃39; listen＆＃39;当我将鼠标移出和移出iframe时，听众的效果。

这是iframe加载时的日志，

mouse action detected with show prev of true
mouse action detected with show prev of false

我有什么关于mouseover / enter / hover / leave / etc的东西吗？也许有些iFrame需要注意？

Answer 1

我没有看到这个的jQuery版本，但你可以用CSS做到这一点：http://jsfiddle.net/w6qjfvzq/

编辑：丹尼尔告诉你为什么你的jQuery不起作用。他是现场。我将此保留在此处，因为CSS是更好的解决方案（浏览器负载较少）。

＆＃13;

#preview {
    background: #eee;
    display: block;
}
#editor {
    background: #ccc;
    display: none;
}

html:hover #preview {
    display: none;
}
html:hover #editor {
    display: block;
}

＆＃13;

<div id="preview">Some content</div>
<textarea id="editor">Some content</textarea>

＆＃13;

Answer 2

您的功能正在立即执行。您需要将事件触发时执行的函数传递给mouseover()和mouseout()，而不是自己执行。

使用以下命令绑定事件处理程序：

$('html,body').mouseover(function(){ showNotePreview(true); });
$('html,body').mouseout(function(){ showNotePreview(false); });

请参阅this fiddle

jQuery mouseenter / leave没有按预期工作

2 个答案: