Trigger code when hovering within a certain distance of a div

I've been wracking my brains over this.

I want to trigger some code when hovering within distance a div e.g. I want to write something like...

$("div").hoverwithin100px(function() {...

Look at my site for an idea of what I'm trying to achieve...

http://www.jaygeorge.co.uk/gwennan-sage/showreel/

I have a "dim the lights' effect that runs on the current video that's being hovered over, but the second you move your mouse outside of the div the effect is disabled. I want to expand the hover fi开发者_JAVA技巧eld but still use the (this) selector so that I can hide videos that aren't being played.

---

Wrap your div in another div which is 100px wider and higher, and which has an onMouseOver event that does what you want.

---

Final code for anyone interested...

//=Jay. Create div before Showreel.
$(document).ready(function(){
    $('.videopress').before("<div class='new'></div>");
});

var boxWidth = $('.videopress object').width();

//=Jay. Showreel Lights Out
$(document).ready(function(){
    $(".new").hover(function() {
        $(this).next().removeClass('videopress');
        $('.videopress').animate({opacity: 0}, 1000);
        //(Below) Chrome requires separate specificity for some reason, cannot chain these.
        $('.videopress object').css('width', '0px');
        $('html').animate({backgroundColor: "black" }, 1000);
        $('nav').animate({opacity: 0}, 1000);
        $('header').animate({opacity: 0}, 1000);
        $('#showreel h1').animate({opacity: 0}, 1000);
    },function() { //Showreel Lights on
        $(this).next().addClass('videopress');
        //(Below) Chrome requires separate specificity for some reason, cannot chain these.
        $('.videopress object').css('width', boxWidth);
        $('.videopress').animate({opacity: 100}, 1000);
        $('html').animate({ backgroundColor: "white" }, 500);
        $('nav').animate({opacity: 100}, 500);
        $('header').animate({opacity: 100}, 500);
        $('#showreel h1').animate({opacity: 100}, 500);
    });
});