Question

我很难搞清楚，为什么这段代码不起作用。我的目的是在用户cliks工具提示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/

的工作代码

Answer 1

我无法弄清楚你在live上使用mouseleave的原因。在没有看到其余代码的情况下，在click上使用它也没有意义。由于某种原因，版本1.7中不推荐使用live，因此您不应该使用它，除非您真正了解它正在做什么及其缺点。

以下代码有效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以更好地表示您的方案并将其发布在您的问题上（此处不作为评论）

使用jquery 1.3.2创建的简单工具提示

1 个答案: