悬停在10px距离内

Question

I have aa bunch of text with links. I would like to be able to fire an event (some sort of "hover" event) when the cursor is at a distance less than 10px from a given link. I know I can use padding but then that would create extra space between the links and the rest of the text.

Is there a nice way to do this?

Answer 1

if you put 10px of padding on them, then put -10px of margin on them. That should get you close to the same view before padding.

Answer 2

you can use this code to see that the other answer has flaws, and a new version: 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

This function will work on any element without having to add markup to your HTML.

Demo: http://jsfiddle.net/ThinkingStiff/Lpg8x/

Script:

$( '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

Well this is a javascript version, though i think i'd personally use Jared's (depends on context..)

$("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");
        }


    }


});