css - Direction aware hover effect with jquery mouseOver has a direction error -


I got a conscious effect about this great direction that I want to apply to my website. I have found this issue that when the right part of the box rotating from the top of the element will be recorded as the hover from the right / instead of the top of the 1/4 element.

Here is the working code to look for.

I do not know where this error is coming from. I have padding, margins, perspective, width, and amp; Height. I can not seem to find out where the error is coming from.

I believe the problem is in the script code, which is below: 

  var nodes = document QuerySelectorAll ('li'), _nodes = [] .slice .call (nodes, 0); Var getDirection = function (ev, obj) {var w = obj.offsetwidth, h = obj.offsetHeight, x = (ev.pageX - obj.offsetLeft - (w / 2) * (w> H? (H / W)): 1)), y = (ev.pageY - obj.offsetteop - (h / 2) * (h & w; w? (W / h): 1)), d = monastery (Math., X) / 1.57079633 + 5)% 4; Return D; }; Var addClass = function (ev, obj, state) {var direction = getDirection (ev, obj), class_suffix = ""; Obj.className = ""; Switch (direction) {case 0: class_suffix = '-top'; break; Case 1: class_sx = 'right'; break; Case 2: Class_safix = '-bottom'; break; Case 3: class_suffix = '-left'; break; } Obj.classList.add (state + class_sfix); }; // bound events _nodes.forEach (function (L) {el.addEventListener ('mouseover', function (ev) {addClass (ev, this, 'in');}, wrong); el.addEventListener ('mouseout' function (Ev) {addClass (ev, this, 'outside');}, false);});

This is the conversion / animation css: 

  li .info {width: 100%; Height: 100%; Padding: 20px; Status: Completed; Top: 0; Left: 0; Boundary-radius: 4px; Pointer-phenomena: none; Background color: RGBA (26, 188, 156, 0.9); Consequently rotating 3D (1, 0, 0, 90 degrees);} top Top. Info {conversion-origin: 50% 0%; Animation: Ease of 0 MMS 1 in in-top 300ms;} .in-right ..in {transform-origin: 100% 50%; Animation: Ease of 0ms 1 in in-right 300ms;} down down. Info {transform-origin: 50% 100%; Animation: Ease of at least 300ms 0ms 1;} .in-left..info {transform-origin: 0% 0%; Animation: 0ms 1 in the in-left 300ms go forward;}. Top-top Info {transform-origin: 50% 0%; Animation: Out-top 300ms 0ms further than 1;} Absolutely right Info {conversion-basic: 100% 50%; Animation: 300ms 0ms ahead of the right-hand side;; Out-down Info {transform-origin: 50% 100%; Animation: Out-down 300ms further than 0ms 1;}. Out-left. Info {conversion-origins: 0% 0%; Animation: Out-left 300ms 0ms 1 go forward;} @ keyframe in-top {from {transform: rotate 3D (-1, 0, 0, 90 degrees); } To {transform: rotate 3D (0, 0, 0, 0deg); }} @keyframe in-right {from {transform: rotate 3D (0, -1, 0, 90 degrees); } To {transform: rotate 3D (0, 0, 0, 0deg); }} @ Keyframe in-floor {to transform: rotate 3D (1, 0, 0, 90 degrees); } To {transform: rotate 3D (0, 0, 0, 0deg); }} @ Keyframe in {from {transform: rotate 3D (0, 1, 0, 90 degrees); } To {transform: rotate 3D (0, 0, 0, 0deg); }} @ Keyframe out-top {from {transform: rotate 3D (0, 0, 0, 0 degree); } {Transform: rotate 3D (-1, 0, 0, 102 degrees); }} @ Keyframe outright {to {transform: rotate 3D (0, 0, 0, 0 degree); } To {transform: rotate 3D (0, -1, 0, 102 degrees); }} @ Keyframe out-to-end {transform: rotate 3D (0, 0, 0, 0 degree); } To {transform: rotate 3D (1, 0, 0, 101 degrees); }} @ Keyframe out-left {from {transform: rotate 3D (0, 0, 0, 0 degree); } To {conversion: rotate 3D (0, 1, 0, 102 degrees); }}

You can find HTML on CodePen I above.

Again - what is happening with me, since the hovering in the element at the top right, it is not registered as the hovering from the top, it registers as the hovering from the right side and accordingly Overlay infects the device.


Comments

Post a Comment

Popular posts from this blog

eclipse plugin - Run java code error: Workspace is closed -

To create an automated project, I created a plug-in project with the following dependencies: Org.eclipse.core.resources org.eclipse.equinox.registry org.eclipse.core.runtime and the following The Java class is located in the src folder: Package Examiner; Import org.eclipse.core.resources.IProject; Import org.eclipse.core.resources.IWorkspaceRoot; Import org.eclipse.core.resources.ResourcesPlugin; Import org.eclipse.core.runtime.CoreException; Import org.eclipse.core.runtime.IProgressMonitor; Import org.eclipse.core.runtime.NullProgressMonitor; Public class tes {public static zero main (string [] args) {// TODO auto generated method stub IProgressMonitor progress monitor = new NullProgressMonitor (); IWorkspaceRoot root = ResourcesPlugin.getWorkspace (). GetRoot (); Ipoject project = root.jetproject ("desired projectname"); Try {Project.create (progress monitor); Project.open (progressMonitor); } Grip (CoreException E) {// TODO Auto generated blocking block e....
Read more

ios - How do I use CFArrayRef in Swift? -

I am using Objective-class in my Swift Project through a bridging header. The method signature looks like this: - Some cement (some type) some parameters; I started by getting an example of class, calling method, and storing the value: var myInstance = MyClassWithThatMethod (); Var cfArr = myInstance.someMethod (some value); Then try to get the value in the array: var valueInArrayThatIWant = CFArrayGetValueAtIndex (cfArr, 0); However, I get the error unmanaged & lt; Cfarray & gt; Not like 'CFArray' . Unmanaged & lt; Cfarray & gt; also means? I looked, but I do not need to change the array in a fast array (though it would be good). I need to be able to get value from the array. I also tried CFArray method to pass in a function: func doSomeStuffOnArray (myArray: NSArray) {} Although I get the same error when using: doSomeStuffOnArray (cfArr); // unmanaged & lt; CFArray & gt; I am using CFArray because I want to sto...
Read more

scala - Play Framework - how to bind form to a session field -

Is there any way, I can get some parameters from the header, cookies (log in userId in my case) , And then apply it in a form which I know who will deposit the ticket? SupportForm supportForm: form [supportTicket] = form (mapping ("question" -> text, "priority" -> text) (apply support ticket. (HelpText.update) What are the good practices here? What is the call to apply the request, when I can use it (and also a good practice?) Edit An issue, absolutely deceiving anyone if I were to create a hidden area with this value. It could Ript, but the issue may be re-used in any way to verify and return the form, it can not be sure how it ....
Read more