Невозможно получить jQuery, чтобы распознать наведение мыши над изображением

Я пытаюсь оживить картинку, когда курсор мыши на нее нависает. Я использую jQuery для этого. Я не могу понять, почему он не работает для текущего состояния моего кода. Извиняюсь заранее, я только начал свои усилия в области веб-разработки.Невозможно получить jQuery, чтобы распознать наведение мыши над изображением

Спасибо!

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css"> 
    <link rel="stylesheet" href="CSS/animate.css"> 
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:500&amp;subset=latin-ext" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
    <script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript" src="scripts/test.js"></script> 
    <title>Daryl N.</title> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="navbar"> 
     <div class="nav-text"><span id="home"><a href="index_test.html">Home</a></span><span id="archive">Archive</span></div> 
     </div> 
     <div id="first" class="background"> 
     <div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div> 
     </div> 
     <div id="second" class="background"> 
     <p class="align-vert">This is my personal website</p> 
     </div> 
    </div> 
    </body> 
</html>

JQuery

$(document).mousemove(function() { 
    if($('#me-pic').is(':hover') 
    { 
     alert("Hello"); 
    } 
});

UPDATE

Источником моей проблемы пришли из установки Z-индекс моего изображения дел до -1 , Меняя это, я решил проблему, а также изменил сценарий.

источник

2016-11-23 darylnak

Не привязывайте событие mousemove на всю страницу. Это крайне неэффективно. Подумайте, сколько раз этот метод будет запущен. Существует способ сделать метод, который вы выбрали, с помощью аргументов событий из mousemove, но для этого потребуется сравнить атрибуты. Вместо этого используйте метод '$ (selector) .hover()'. – magreenberg

Ну, я не уверен, что если ваш метод должен работать или нет, но есть лучший способ справиться с этим , предназначенная для первоначальной цели:

$(document).ready(function() { 
    $('#me-pic').hover(function() { 
    alert("Hello"); 
    }); 
});

источник

2016-11-23 17:56:31 casraf

Это все еще не работает. Может ли что-то в моем файле CSS вызвать проблемы? – darylnak

Попробуйте обернуть его в '$ (document) .ready (function() {...});', так как вы, кажется, загружаете файл js над остальной частью страницы, это заставит его ждать чтобы завершить загрузку. Отредактировано ответ – casraf

Я создал тестовую страницу и могу подтвердить это! Должно быть что-то не так с моей текущей страницей. Спасибо, +1. – darylnak

С JQuery вы можете прикрепить событие парения непосредственно на селекторе, попробуйте следующее:

$(document).ready(function() { 
    $('#me-pic').hover(function(){ 
     alert("Hello"); 
    }) 
});

источник

2016-11-23 17:55:49 MCMXCII

Это все еще не работает. Может ли что-то в моем файле CSS вызвать проблемы? – darylnak

Невероятно, какие ошибки вы получаете в консоли? – MCMXCII

решение состоит в том, чтобы использовать метод hover Jquery.

$('#me-pic').hover(function(){ 
    alert("Hello"); 
})

Просмотреть ссылку here.

Кроме того, я рекомендую удалить $(document).mousemove() event.In в этой ситуации это неэффективный метод.

источник

2016-11-23 18:07:27

Невозможно получить jQuery, чтобы распознать наведение мыши над изображением

ответ

Смежные вопросы