使用jquery 1.3.2创建的简单工具提示 [英] simple tooltips created using jquery 1.3.2
问题描述
我很难弄清楚为什么这段代码不起作用.我的意图是在用户单击工具提示div时显示一条消息.将鼠标光标移出div后，工具提示应关闭. 我需要在单个页面上显示消息的最简单的方法.我需要使用jQuery 1.3.2.有人可以帮忙吗?谢谢
I have difficult time figuring out, why this code doesn't work. My intention is to display a message when user cliks on tooltip div. After moving mouse cursor out of the div, the tooltip should close. I need the simplest possble way of displaying a message on a single page. I need to use jquery 1.3.2.Can anybody help? Thank you
<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/
here is the working code by Juan Mendes http://jsfiddle.net/HUG2Z/3/
推荐答案
我不知道为什么在mouseleave上使用live.如果不看其余的代码，在click上使用它也是没有意义的.出于某些原因，live在1.7版中已被弃用，因此除非您真正了解它的作用和缺点，否则不要使用它.
I can't figure out why you're using live on mouseleave. Without seeing the rest of the code, it doesn't make sense to use it on click either. live is deprecated in version 1.7 for a reason, so you should not use it, unless you really understand what it's doing and its drawbacks.
以下代码有效 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以更好地表示您的情况，然后将其发布到您的问题上(此处不作评论)
If this is now what you want, just change the jsfiddle to better represent your scenario and post it on your question (not as a comment here)
这篇关于使用jquery 1.3.2创建的简单工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
