Question

我有一堆带链接的文字。当光标与给定链接的距离小于10px时，我希望能够触发一个事件（某种“悬停”事件）。我知道我可以使用padding，但这会在链接和文本的其余部分之间创建额外的空间。

有一个很好的方法吗？

Answer 1

如果你在它们上面放10px的填充，那么就在它们上加上-10px的边距。这应该让你在填充之前接近相同的视图。

Answer 2

您可以使用此代码查看其他答案是否存在漏洞，以及新版本：http://jsfiddle.net/25gSY/1/

HTML：

works here
<a href="#" style="position:relative">
  <span style="position:absolute;top:-20px;left:-20px"></span>example
</a>
and works here

的javascript：

$('span').width($('span').parent().width()+40);
$('span').height($('span').parent().height()+40);
$('span').hover(function(){alert('123')});

Answer 3

此功能适用于任何元素，无需在HTML中添加标记。

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

脚本：

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

    if( isNear( $( '#your-element' ), 20, event ) ) {
        //near
    } else {
        //not near
    };

} );           

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 );

};

Answer 4

这是一个javascript版本，虽然我认为我个人使用Jared的（取决于上下文..）

$("p").bind("mousemove", function(e) {


    var links = $("a", this);

    for(var i = 0 ; i < links.length; i++) {

        var link = $(links[i]);
        var linkPosition = link.position();
        var linkSize = {width: link.width(), height: link.height()};
        var mousePosition = {left: e.pageX, top: e.pageY};

        //match top
        var matchTop = false;
        if(mousePosition.top >= linkPosition.top - 10 && (mousePosition.top <= linkPosition.top + linkSize.height + 10)) {
            matchTop = true;
        }

        //match left
        var matchLeft = false;
        if(mousePosition.left >= linkPosition.left - 10 && (mousePosition.left <= linkPosition.left + linkSize.width + 10)) {
            matchLeft = true;
        }

        if(matchLeft&&matchTop) {
            link.addClass("HOVER");
        } else {
            link.removeClass("HOVER");
        }


    }


});

悬停在10px距离内

4 个答案: