2

我有一个 div 作为左侧的侧边栏，然后其余的（右侧）是一个 IFrame。我的侧边栏的宽度为 50，我希望只要鼠标靠近它的右侧，它就会隐藏，然后当鼠标“进入 <50 区域”时，侧边栏会再次显示。

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

4

3 回答 3

1

我认为，如果我对您的问题的理解正确，则与捕获鼠标位置无关（基于 pageX / pageY 原则）；但相反，您只想在 mouseenter 和 mouseleave （悬停）上触发动作。

您可以通过正确构建 DOM，然后按照您想要的方式对其进行样式设置来实现这些结果。

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

编辑

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

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

于 2012-04-19T04:43:19.610 回答
0

也许是这样的：

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/

于 2012-04-19T04:32:49.563 回答
0

当您开始使用 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>

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

我知道 iframe 有自己的规则，但我也知道可以与它们进行交互，因为人们一直都在这样做。不幸的是，我实际上并没有与他们合作，所以我没有答案。

于 2012-04-19T04:46:50.387 回答