无法让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

我的问题的根源来自于我的形象div的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()事件。在这种情况下，这是效率低下的方法。

来源

2016-11-23 18:07:27

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

回答

相关问题