创建一个 div 元素,创建一个 css 规则使其默认隐藏,在您的 div 元素上添加 onmouseover 和 onmouseout 事件,并具有与这些相关的以下功能:
function showSomething(textToShow, container) {
var yourElement = $('#yourDivElement');
yourElement.removeClass('hidden');
var w = container.getClientRects()[0].width;
var h = container.getClientRects()[0].height;
var t = container.getClientRects()[0].top;
var l = container.getClientRects()[0].left;
var st = document.documentElement.scrollTop;
var sl = document.documentElement.scrollLeft;
if (st == 0 && document.body.scrollTop > st)
st = document.body.scrollTop;
if (sl == 0 && document.body.scrollLeft > sl)
sl = document.body.scrollLeft;
yourElement.css('top', t + st + h / 3 * 2);
yourElement.css('left', l + sl + w / 3 * 2);
yourElement.html(textToShow);
var lines = textToShow.length / 20;
yourElement.css('height', 20 + lines * 10);
}
function hideSomething() {
$('#yourDivElement').addClass('hidden');
}
以防万一(隐藏的 CSS 规则)
.hidden {
display: none;
}
和......以防万一
<div onmouseover="showSomething('show this', this);" onmouseout="hideSomething();" class="hidden"></div>
这将定位与您的 div 的父对象(包含您的 div 元素的那个)相关的浮动对话框(类似于 alt)...
简单的 ;)