Question

HTML：

<body>
<img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/> 
</body>

JAVASCRIPT：

$("#bowleft").mouseenter(function(){
    console.log("worked!!!");alert("worked!!!");
});

但这个简单的鼠标悬停在本地或远程无法使用chrome或firefox！

有人可以自己尝试看看我是否会发疯或是否是我的操作系统？ https://www.dropbox.com/s/ahpaluj2e7ru9xn/mouseover.zip

Answer 1

.mouseenter代码在#bowleft元素存在之前运行。您需要确保它在DOM中存在该元素之后运行。有很多方法可以做到这一点。我建议在</body>之前将JavaScript移到正确的位置。你也可以把它包装成：

$(function () {

或$(document).ready(function () {，功能相同。

我还建议使用.on而不是事件后命名的特定函数，但这不会影响到你。一起来：

<body>
    <img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script>
        $("#bowleft").on("mouseenter", function () {
            console.log("worked!!!");
        });
    </script>
</body>

Answer 2

您试图在JS存在于DOM之前使用JS引用该图像。

最好的办法是将JS移到关闭的body标签之前，如下所示：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>

  <body>
    <img src="http://pjg.mobi/mh/images/layover_brownstring.png" id="bowleft" width="200" height="77" alt=""/> 
    <script src="js/jquery-1.10.2.min.js"></script>
    <script>
      $("#bowleft").mouseenter(function(){
        console.log("worked!!!");
        alert("worked!!!");
      });
    </script>
  </body>
</html>

如果您想将其保留在文档的头部，则必须将其包装在$(document).ready()回调中。

Answer 3

试试这个工作........

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#bowleft").mouseenter(function () {
            console.log("worked!!!"); alert("worked!!!");
        });
    });

jquery mouseover无法正常工作。仅在jsfiddle工作

3 个答案: