{"id":9847,"date":"2011-06-19T11:37:36","date_gmt":"2011-06-19T18:37:36","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=9847"},"modified":"2013-07-19T05:54:18","modified_gmt":"2013-07-19T12:54:18","slug":"calculate-distance-between-mouse-and-element","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/jquery\/calculate-distance-between-mouse-and-element\/","title":{"rendered":"Calculate Distance Between Mouse and Element"},"content":{"rendered":"<pre rel=\"jQuery\"><code class=\"language-javascript\">(function() {\r\n    \r\n    var mX, mY, distance,\r\n        $distance = $('#distance span'),\r\n        $element  = $('#element');\r\n\r\n    function calculateDistance(elem, mouseX, mouseY) {\r\n        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()\/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()\/2)), 2)));\r\n    }\r\n\r\n    $(document).mousemove(function(e) {  \r\n        mX = e.pageX;\r\n        mY = e.pageY;\r\n        distance = calculateDistance($element, mX, mY);\r\n        $distance.text(distance);         \r\n    });\r\n\r\n})();<\/code><\/pre>\n<p>This code will calculate the distance between the mouse cursor and the center of an element. This can be useful for triggering a function when the mouse is within a certain distance of an element. Or, you can base the value of a property, such as the width, height, or opacity of the element, on the proximity of the mouse cursor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>(function() { var mX, mY, distance, $distance = $(&#8216;#distance span&#8217;), $element = $(&#8216;#element&#8217;); function calculateDistance(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX &#8211; (elem.offset().left+(elem.width()\/2)), 2) + Math.pow(mouseY &#8211; (elem.offset().top+(elem.height()\/2)), 2))); } $(document).mousemove(function(e) { mX = e.pageX; mY = e.pageY; distance = calculateDistance($element, mX, mY); $distance.text(distance); }); })(); This code will calculate the distance between the mouse cursor [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3245,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14188,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/","url_meta":{"origin":9847,"position":0},"title":":focus","date":"September 6, 2011","format":false,"excerpt":"The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example: textarea:focus { background: pink; } CodePen Embed Fallback Any element (most commonly\u00a0<input>s and\u00a0<textarea>s) are in \"focus\" when they are selected and ready\u2026","rel":"","context":"With 33 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18170,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/pointer-events\/","url_meta":{"origin":9847,"position":1},"title":"pointer-events","date":"June 20, 2013","format":false,"excerpt":"The pointer-events property allows for control over how HTML elements respond to mouse\/touch events \u2013 including CSS hover\/active states, click\/tap events in Javascript, and whether or not the cursor is visible. .avoid-clicks { pointer-events: none; } While the pointer-events property takes eleven possible values, all but three of them are\u2026","rel":"","context":"In \"pointer-events\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14200,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/hover\/","url_meta":{"origin":9847,"position":2},"title":":hover","date":"September 6, 2011","format":false,"excerpt":"The\u00a0:hover\u00a0pseudo class in CSS selects elements when the mouse cursor is current over them. It\u2019s commonly associated with link (<a>) elements. a:hover { color: green; text-decoration: underline overline; } So when a link like this is \u201chovered\u201d (like with a cursor on a device with a mouse): <a href=\"https:\/\/google.com\">Go to\u2026","rel":"","context":"In \"hover\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14043,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/cursor\/","url_meta":{"origin":9847,"position":3},"title":"cursor","date":"September 5, 2011","format":false,"excerpt":"The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it's only relevant in browsers\/operating systems in which there is a mouse and cursor. They are used essentially for UX to convey the\u2026","rel":"","context":"In \"cursor\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":243593,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-distance\/","url_meta":{"origin":9847,"position":4},"title":"offset-distance","date":"July 22, 2016","format":false,"excerpt":"This property began life as motion-offset. This, and all other related motion-* properties, are being renamed offset-* in the spec. We're changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes. The motion-offset property in CSS says: how far\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17444,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/perspective\/","url_meta":{"origin":9847,"position":5},"title":"perspective","date":"July 9, 2012","format":false,"excerpt":"The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user. The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/9847"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=9847"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/9847\/revisions"}],"predecessor-version":[{"id":22454,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/9847\/revisions\/22454"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3245"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=9847"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=9847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}