Question

我需要在mouseover上创建2个显示描述框的链接。所述描述框用于隐藏鼠标输出。我得到的要求是使用Javascript或jQuery（没有其他第三方插件或类似）。到目前为止一切都很好。

我对Javascript或jQuery都不擅长，所以Google把我带到了this link，在那里我找到了this JSFiddle。这正是我所寻找的。当我用我想要显示的内容更改代码时，会显示链接，但不显示描述框。

如果我修改JSFiddle并使用我想要显示的文本运行它，整个过程都有效，但它在我的浏览器上不起作用。我试过PC和Mac，IE11和FF 40.0.3。我也试过没有链接到jQuery库文件的脚本链接，它仍然无法正常工作。我做错了什么？

这是我的代码：

<!doctype html>
<head>
   <title>Project 1: description boxes on links</title>
   <style>
    div {
       position: absolute;
       display: none;
       background: #ccc;
       border: 1px solid;
    }

   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script>
    $("a").hover(function(e) {
            $($(this).data("tooltip")).css({
                left: e.pageX + 1,
            top: e.pageY + 1
            }).stop().show(100);
    }, function() {
            $($(this).data("tooltip")).hide();
    });


   </script> 
</head>

<body>
   <a href="http://pagea.com" data-tooltip="#pageA">My link 1</a>
   <br><br>
   <a href="http://pageb.com" data-tooltip="#pageB">My link 2</a>

   <div id="pageA">This links goes to page A</div>
   <div id="pageB">This link goes to page B</div>
</body>

提前谢谢。

Answer 1

加载文档时，脚本会在文档中到达后立即运行。这意味着在调用脚本之前可能没有加载DOM的其余部分。你可以通过将脚本包装在jQuery事件监听器中来解决这个问题，如下所示：

<script>
    $(function(){
        $("a").hover(function(e) {
            $($(this).data("tooltip")).css({
                left: e.pageX + 1,
            top: e.pageY + 1
            }).stop().show(100);
        }, function() {
            $($(this).data("tooltip")).hide();
        });
    });
</script>

另一种方法是在结束</body>元素之前将脚本放在文档的按钮上。

jQuery：描述框不会显示 - 为什么？

1 个答案: