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");
    }
});

更新

我的问题来源是将my image div的z-index设置为-1。改变这个问题解决了我的问题，也改变了脚本。

Answer 1

好吧，我不确定你的方法是否应该起作用，但是有一种更好的方法可以解决这个问题，这是为了原始目的而设计的：

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

Answer 2

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

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

Answer 3

解决方案是使用hover jquery方法。

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

查看参考here。

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

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

3 个答案: