Javascript-форум - Событие mouseenter

Подскажите, пожалуйста. Как реализовать, чтобы событие срабатывало при наведении не на сам блок, а на произвольном расстоянии от него, например, 300px, либо любое другое указанное значение

Код:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

        <meta charset="UTF-8">

        <title>title</title>

        <link rel="stylesheet" href="css/style.css" />

        

        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

        <script type="text/javascript" src="js/script.js"></script>

</head>

<body>

         

<div id="back-top"></div>



</body>

</html>

Код:

 

*{

        margin: 0;

        padding: 0;

}



#back-top{

        position: fixed; top: 0; left: 0;

        display: block;

        width: 82px;

        background: #FF7055;

        opacity: 0.5;

        cursor:  pointer;

}

$(document).ready(function (){
	
	var backtop_h = $(window).height();
	// var backtop_w = $('#back-top').width() + 400;
	
	$('#back-top').css({"height": backtop_h});
											  
	$("#back-top").on("mouseenter", function(){ 
		console.log("mouseenter");
	});

});

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } #back-top{ position: fixed; top: 0; left: 0; display: block; width: 82px; background: #FF7055; opacity: 0.5; cursor: pointer; height: 0; transition: all .8s ease-in-out; } #back-top.target{ background-color: #00FF00; height: 100px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function() { $(document).mousemove(function(b) { var c = $("#back-top"), a = c.offset(), a = { top: a.top - 300, left: a.left - 300, right: a.left + c.width() + 300, bottom: a.top + c.height() + 300 }; c.toggleClass("target", b.pageX <= a.right && b.pageX >= a.left && b.pageY <= a.bottom && b.pageY >= a.top) }) }); </script> </head> <body> <div id="back-top"></div> </body> </html>