JQuery：圖像通過鼠標移動出現？

當鼠標移動時，我想讓圖像顯示在我的網站上。這似乎是一個愚蠢的事情，但是當頁面加載圖像時還是不可見的，這一點非常重要。JQuery：圖像通過鼠標移動出現？

我的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>

在我的CSS我正在做的圖像不可見

#entrar { 
    display: none; 
}

而且在我的javascript：

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

誰能告訴我什麼我做錯了PLZ。謝謝

來源

2013-12-14 user3103062

這將有助於創建一個顯示問題的jsfiddle。您一眼就可以嘗試使用[jquery ready（）]（http://api.jquery.com/ready/）而不是window.onload。 – Jonah

它爲我工作。 [DEMO]（http://jsfiddle.net/tewathia/vctA3/）。嘗試在'.page-container'中放入一些內容，然後用鼠標移動這個 – tewathia

只需要好奇，爲什麼不顯示'block'而不是'inline'？因爲無論如何，你都要在塊元素中包裝一個標籤。此外，它將有助於設置圖像的高度和寬度。你已經這樣做了嗎？ –

在聲明這個你的源文件，不在函數內！

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

來源

2013-12-14 22:00:16 ProllyGeek

爲什麼你給這個正確的答案呢？它工作與否？ – ProllyGeek

我的錯誤，對不起。我在測試xD之前忘了保存它工作，謝謝：D – user3103062

沒問題，很高興幫助 – ProllyGeek

看起來可能頁面容器沒有佔用任何空間，因此它永遠不會收到mousemove事件。下面是一個簡單的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.

你應該預加載圖像，以儘量減少或避免惱人/混淆滯後，像這樣：

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

來源

2013-12-14 21:25:58

嘗試了對CSS的更改並仍然沒有工作 – user3103062

您是否檢查過示例小提琴？代碼在那裏工作正常。 –

JQuery：圖像通過鼠標移動出現？

回答

相關問題