0

我很难弄清楚为什么这段代码不起作用。我的目的是在用户单击工具提示 div 时显示一条消息。将鼠标光标移出 div 后，工具提示应关闭。我需要在单个页面上显示消息的最简单的方式。我需要使用 jquery 1.3.2。有人可以帮忙吗？谢谢

<html>
<head>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('.wrapper').live('click', showBox).live('mouseleave', hideBox);

    function showBox(e){
        var x = e.pageX + 20;
        var y = e.pageY + 20;
        $('.tooltip').fadeIn();
        $('.tooltip').offset({ left: x, top: y });
    }
});

function hideBox(){
    $('.tooltip').fadeOut();
}

</script>
<style>
  .div{ margin:10px;padding:12px;
         border:2px solid #666;
         width:60px;
       }
  </style>
</head>
<body>
<div class="wrapper">sometext</div>
<div class="tooltip">tooltip1</div>
</body>
</html>

编辑：这是 Juan Mendes 的工作代码http://jsfiddle.net/HUG2Z/3/

4

1 回答 1

2

我无法弄清楚你为什么使用liveon mouseleave。在没有看到其余代码的情况下，在其中任何一个上使用它都没有意义click。live出于某种原因，在 1.7 版中已弃用它，因此您不应使用它，除非您真正了解它的作用及其缺点。

以下代码有效http://jsfiddle.net/HUG2Z/1/

$(document).ready(function(){

    $('.somefield').click(showBox).mouseleave(hideBox);

    function showBox(e){
        var x = e.pageX + 20;
        var y = e.pageY + 20;
        $('.tooltip').fadeIn();
        $('.tooltip').offset({ left: x, top: y });
    }

    function hideBox(){
        $('.tooltip').fadeOut();
    }
});

如果这是您现在想要的，只需更改 jsfiddle 以更好地代表您的场景并将其发布在您的问题上（此处不作为评论）

于 2012-11-16T17:43:51.013 回答