Я хочу, чтобы изображение появлялось на моем сайте при перемещении мыши. Это может показаться глупым делом, но очень важно, чтобы при загрузке страницы изображение еще не видно.
Мой 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();
}
Может ли кто-нибудь сказать мне, что я делаю неправильно? благодаря
Объявите это в исходном файле, а не внутри функции!
$(document).ready( function(){
$(".page-container").mousemove(function(){
$("a#entrar").css("display", "inline");
});
})
Вероятно, контейнер страницы не занимает какое-либо место, и поэтому он никогда не получает событие mousemove. Вот простое исправление CSS для проверки этой теории:
body { position : absolute; top :0; bottom : 0; left : 0; right: 0;}
.page-container { width : 100%; height : 100%; background-color : #ddd; }
Вы должны предварительно загрузить изображение, чтобы свести к минимуму или избежать раздражающего/запутанного отставания:
var img = new Image();
img.src = '//your/url/to/image';
.page-container
mousemove
а затемmousemove
мыши.