Question

我有一个div作为左侧的侧边栏，然后其余的（右侧）是一个IFrame。我的侧边栏宽度为50，我希望每当鼠标朝向它隐藏的右边时，然后当鼠标“进入＆lt; 50区域”时，侧边栏会再次显示。

这是可能的还是跨域访问存在问题？

Answer 1

我认为如果我理解你的问题，那就不是捕捉鼠标位置（基于pageX / pageY原则）;但相反，你只想在mouseenter和mouseleave上进行操作（悬停）。

您可以通过正确构建DOM，然后按照自己的方式设置样式来实现这些结果。

无需预测鼠标的位置，我们可以简单地指示何时显示以及何时隐藏内容。在这种情况下，我们使用您想要的50px，并根据用户的操作“显示/隐藏”。请参阅下面的jsFiddle：

修改

由于性能问题，我选择使用.css()而不是.animate()。如果你想调整它，请告诉我。

http://jsfiddle.net/YGmN3/3/

Answer 2

也许是这样的：

HTML

<div id="sidebar" style="float:left; width:50px; background-color:green; height:250px;"></div>

JS

$("html").mousemove(function(event) 
{

    var xPos = event.pageX;
    if (xPos <= 50) 
    {
        $("#sidebar").show();
    }
    else 
    {
        $("#sidebar").hide();
    }
});

http://jsfiddle.net/5VEzx/

Answer 3

当你开始使用iframe时肯定会出现并发症 - 这不起作用：

<Doctype! html>

<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>
          body iframe {
              margin-left: 100;
              border: 2px solid red;
          }
        </style>
        <script type="text/javascript" src="jquery.js"></script>
        <script>
          $(function(){
              $(document).on('mousemove', function(evt){
                  $('#pagex').text(evt.pageX);
              });
          })
        </script>
    </head>
    <body>
      <div id="pagex"></div>
        <iframe id="theframe">
          <div id="innepage"></div>
        <script type="text/javascript">
              $(document).on('mousemove', function(evt){
                      console.log(evt);
                  $('#innerpage').text(evt.pageX);
              });
        </script>
        </iframe>
    </body>
</html>

事实上，我无法将mousemove侦听器放置在iframe内成功触发的。

我知道iframe有自己的规则，但我也知道可以与他们互动，因为人们会一直这样做。不幸的是我实际上并没有使用它们，所以我没有答案。

iframe上的鼠标位置

3 个答案: