JQuery: изображение появляется при движении мыши?

0

Я хочу, чтобы изображение появлялось на моем сайте при перемещении мыши. Это может показаться глупым делом, но очень важно, чтобы при загрузке страницы изображение еще не видно.

Мой 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();
}

Может ли кто-нибудь сказать мне, что я делаю неправильно? благодаря

  • 0
    Это помогло бы создать jsfiddle, показывающий проблему. С первого взгляда вы можете попробовать использовать jquery ready () вместо window.onload.
  • 0
    Это работает для меня. ДЕМО . Попробуйте поместить некоторый контент в .page-container mousemove а затем mousemove мыши.
Показать ещё 1 комментарий
Теги:

2 ответа

0
Лучший ответ

Объявите это в исходном файле, а не внутри функции!

 $(document).ready( function(){
    $(".page-container").mousemove(function(){
        $("a#entrar").css("display", "inline"); 
    });
})
  • 0
    почему вы дали правильный ответ тогда? это работает или нет?
  • 0
    Моя ошибка, прости. Я забыл сохранить перед тестированием xD Все заработало, спасибо: D
Показать ещё 1 комментарий
0

Вероятно, контейнер страницы не занимает какое-либо место, и поэтому он никогда не получает событие 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';
  • 0
    Попробовал изменение CSS и до сих пор не работает
  • 0
    Вы проверили пример скрипки? Код там работает нормально.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню