相对于鼠标滚动位置定位div

时间:2010-02-07 19:02:53

标签: javascript html css tooltip

在某些鼠标悬停时,会显示div1。如何显示鼠标指针旁边的div,这样即使鼠标悬停在上下文末尾,div也会显示在鼠标指针旁边。

<style type="text/css">
#div1 { width: 200px; height: 30px; background-color: #a9a9a9; color: #fff; position: absolute; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(window).mouseover(function(event){
$("#div1").css({'top': event.pageY, 'left': event.pageX});  
});
});
</script>
<div id="div1">mouseover me</div>

2 个答案:

答案 0 :(得分:1)

您想要做的通常术语是“工具提示。”

您最好的选择可能是使用像Prototip这样的JavaScript框架,它提供此功能(而不是尝试自己编写代码)。 (搜索“挂钩”部分的链接,了解如何使用Prototip 创建这样的工具提示。)

答案 1 :(得分:0)

这可能会有所帮助:http://webdevpad.blogspot.com/2010/07/cross-browser-mouse-coordinates.html

获得鼠标位置后,给它一个小偏移量,将坐标传递给工具提示div,并记住给出工具提示位置:固定。