无法让 jQuery 识别鼠标悬停在图像上答案

【问题标题】：Cannot get jQuery to recognize mouse hover over image无法让 jQuery 识别鼠标悬停在图像上
【发布时间】：2016-11-23 17:53:41
【问题描述】：

当鼠标光标悬停在图片上时，我正在尝试为图片设置动画。我正在使用 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");
    }
});

更新

问题的根源在于将图像 div 的 z-index 设置为 -1。改变这个解决了我的问题，也改变了脚本。

【问题讨论】：

不要将 mousemove 事件绑定到整个页面。它的效率极低。想想该方法将运行多少次。有一种方法可以通过使用来自 mousemove 的事件 args 使您选择的方法起作用，但它需要比较属性。请改用$(selector).hover() 方法。

标签： javascript jquery html css jquery-hover

【解决方案1】：

嗯，我不确定你的方法是否应该有效，但有更好的方法来处理这个问题，专为最初的目的而设计：

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

【讨论】：

那仍然行不通。我的 CSS 文件中的某些内容会导致问题吗？
尝试将其包裹在$(document).ready(function() { ... }); 中，因为您似乎正在将js 文件加载到页面其余部分之上，这将导致它等待页面完成加载。编辑了答案
我创建了一个测试页面并且可以确认这个工作！我当前的页面一定有问题。谢谢，+1。

【解决方案2】：

使用 jQuery，您可以将悬停事件直接附加到选择器上，试试这个：

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

【讨论】：

那仍然行不通。我的 CSS 文件中的某些内容会导致问题吗？
不太可能，您在控制台中遇到什么错误？

【解决方案3】：

解决方法是使用hoverjquery方法。

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

查看参考here。

此外，我建议您删除$(document).mousemove()事件。在这种情况下，这是一种低效的方法。

【讨论】：