jQuery的：图像显示通过鼠标移动？

Question

I want to make a image appear on my site when the mouse moves. 我想使图像在鼠标移动时出现在我的网站上。 It can appear to be a stupid thing to do, but it's really important that when the page loads the image is not yet visible. 这似乎是很愚蠢的事情，但是在页面加载时图像不可见非常重要。

My HTML is like this: 我的HTML是这样的：

<html>
<head>
</head>
<body>
    <div class="page-container">
        <div>
          <a id="entrar" href="_pt/log_in.html"><img src="_assets/entrar.jpg" alt="entrar"></a>
        </div>
    </div>
<script src="_js/jquery-1.10.2.js"></script>
<script src="_js/jquery-ui-1.10.3.js"></script>
<script src="_js/exp.js"></script>
</body>
</html>

In my CSS i'm making the image not visible 在我的CSS中，我使图像不可见

#entrar {
    display: none;
}

And in my Javascript: 在我的Javascript中：

function PrepareHandlers() {
    $(".page-container").mousemove(function(){
        $("a#entrar").css("display", "inline"); 
    });
}
...
window.onload = function(){
    ....
    PrepareHandlers();
}

Could anyone tell me what I'm doing wrong plz. 谁能告诉我我在做什么错。 Thanks 谢谢

Answer 1

It appears likely the page container is not taking up any space, and therefore it never receives a mousemove event. 页面容器似乎没有占用任何空间，因此它永远不会收到mousemove事件。 Here is an easy CSS fix to test this theory: 这是测试此理论的简单CSS修复程序：

body { position : absolute; top :0; bottom : 0; left : 0; right: 0;} 
.page-container { width : 100%; height : 100%; background-color : #ddd; }

Check out this solution. 查看此解决方案。

You should preload the image to minimize or avoid an annoying/confusing lag like so: 您应该预加载图像，以最大程度地减少或避免烦人的/令人困惑的延迟，如下所示：

var img = new Image();
img.src = '//your/url/to/image';

Answer 2

Declare this in your source file , not inside a function ! 在源文件中声明此内容，而不是在函数中声明！

 $(document).ready( function(){
    $(".page-container").mousemove(function(){
        $("a#entrar").css("display", "inline"); 
    });
})

jQuery的：图像显示通过鼠标移动？

问题描述

2 个解决方案

解决方案1
0 2013-12-14 21:25:58

解决方案2
0 已采纳 2013-12-14 22:00:16

jQuery的：图像显示通过鼠标移动？

问题描述

2 个解决方案

解决方案1 0 2013-12-14 21:25:58

解决方案2 0 已采纳 2013-12-14 22:00:16

解决方案1
0 2013-12-14 21:25:58

解决方案2
0 已采纳 2013-12-14 22:00:16