jquery - How to make a function run only in a certain area (div) -

Thanks for this forum I found my code to work :-) Although it requires some financing. The function can work only when the mouse gets trapped on top of the image

This is my first attempt, with the hover function, though there is something strange about displaying mouse coordinates. You can work here (for example, can work on the whole page): (open in Chrome)

  & lt; Head & gt; & Lt; Script src = "jquery-1.11.1.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; $ (Document) .mousemove (function) {var relative x = monastery .CEL (event.pagex / 23); var current step = relative x * -230; $ (".model"). Hover (function () $ {"(" .model "). CSS (" background-position "," 0+ "+ (current step) +" px "); // $ (" span ") to know just what's happening. Text ("X:" + Event.pageX + ", Y:" + event.pageY)});}); & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; .model {width: 300px; Height: 230px; Background-image: url ('sprite.png'); Background-position: 0 4000x; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "model" style = "" & gt; & Lt; / Div & gt; & Lt; P & gt; Data & lt; Span & gt; & Lt; / Span & gt; & Lt; / P & gt; & Lt; / Body & gt;  

Change your function code with:

 < Code> $ (document) .mousemove (function) {var relativeX = Math.ceil (event.pageX / 123); var widthOfElement = $ (".model"). External Wide (); var Step = Width Appealment / 300; var CurrentStep = Math.ceil (relativeX / step * -231); var hovering = falls; $ ("span"). Text ("x" + event.pageX + "" + "y" + event.pageY) ; $ (".model"). CSS ("background-position", 0 + "+ + (current phase) +" px "); if (current phase & lt; 1) {currentStep = 1;}});  

I have a function with the function (e) function (event) Team: