jQuery中元素附近元素的功能

时间:2011-10-27 04:06:14

标签: javascript jquery html javascript-events

当鼠标靠近桌面元素时,我想跟踪并显示工具提示。它适用于mouseenter事件,但我想在mouseenter之前显示工具提示,当它接近时。此外,我想在mouseout离桌头一段距离后删除工具提示。

这是我的代码。

$('thead').mouseenter(showtooltip);
$('thead').mouseout(removetooltip);

如何使用jQuery执行此操作?

1 个答案:

答案 0 :(得分:29)

这很有效。第一个参数可以是任何jQuery对象。第二个参数是对象的接近度,在本例中为20px

演示:http://jsfiddle.net/ThinkingStiff/Lpg8x/

脚本:

$( 'body' ).mousemove( function( event ) {

    if( isNear( $( 'thead' ), 20, event ) ) {
        //show your tooltip here
    } else {
        //hide it here
    };

});           

function isNear( element, distance, event ) {

    var left = element.offset().left - distance,
        top = element.offset().top - distance,
        right = left + element.width() + 2*distance,
        bottom = top + element.height() + 2*distance,
        x = event.pageX,
        y = event.pageY;

    return ( x > left && x < right && y > top && y < bottom );

};