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

Question

我正在尝试在鼠标光标悬停在图片上时为图片制作动画。我正在使用 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。改变这个解决了我的问题，也改变了脚本。

Answer 1

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

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

Answer 2

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

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

Answer 3

解决方法是使用hoverjquery方法。

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

查看参考 here.

此外，我建议你去掉$(document).mousemove() event.In这种情况，这是一种低效的方法。

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

Cannot get jQuery to recognize mouse hover over image

html

javascript

css

jquery

jquery-hover