從iFrame運行父Javascript

Question

我有一個頁面（紅色）和一個（打開）iFrame 。 在iFrame的代碼內，還有另一個iFrame包含另外2頁（綠色和藍色）。

在“紅頁”中，我有一些Javascript，當鼠標懸停在屏幕的右側（距右側300px）時，允許顯示隱藏的側邊欄。 效果很好，但是如果用戶將鼠標拉開並且光標在iFrame中的紅色或綠色頁面上徘徊，則側邊欄將不會縮回。 但是，如果用戶將光標移回紅色區域（頂部和左側），則側邊欄將按預期收縮。 我假設紅色和綠色頁面中沒有代碼告訴邊欄在發生鼠標懸停時縮回。

我的問題是，我真的很喜歡Javascript。 無論鼠標光標停在何處，我如何使側欄縮回？ 任何幫助將不勝感激。 謝謝

  $(window).on('mousemove',function(e){ if(e.pageX >= $(window).width() - 300 || e.target.id=='sidebar' ){ $('#sidebar').css({'right':'0px'}); } else{ $('#sidebar').css({'right':'-300px'}); } }); 

Answer 1

您能否嘗試將mousemove事件更改為使用鼠標移出和鼠標移入？

$(window).on('mousein',function(e){
    $('#sidebar').css({'right':'0px'});
}
$(window).on('mouseout',function(e){
    $('#sidebar').css({'right':'-300px'});
});

我也想建議也許使用基於CSS的解決方案，而不是使用:hover選擇器在鼠標:hover時顯示/隱藏側邊欄

 .sidebar-container{ width:300px; height:100%; background:#999; position:absolute; left:0px; top:0px; } .sidebar-container .sidebar{ width:100%; height:100%; background:#465; position:absolute; left:-300px; top:0px; transition:all 0.5s; } .sidebar-container:hover .sidebar{ left:0px } 

 <div class="sidebar-container"> <div class="sidebar">Hi!</div> </div>