Element to point toward another element

Question

I need to make four rectangles and an arrow at the center that points toward the rectange that is hovered. See https://jsfiddle.net/Lvmf67rm/1/

$(document).ready(function(){
  $('.quarter:nth-child(1)').mouseenter(function(){
    $('.pointer').css('transform','rotate(-45deg)');
  });
  $('.quarter:nth-child(2)').mouseenter(function(){
    $('.pointer').css('transform','rotate(45deg)');
  });
  $('.quarter:nth-child(3)').mouseenter(function(){
    $('.pointer').css('transform','rotate(-135deg)');
  });
  $('.quarter:nth-child(4)').mouseenter(function(){
    $('.pointer').css('transform','rotate(135deg)');
  });
});

There are two issues with what I've made:

If there would be an element before or somewhere in-between the rectangle divs - the arrow would point in the wrong direction (this is because "nth-child()" selects the children regardless of class)
When hovering between 3rd and the 4th rectangles the arrow doesn't go straight to the next block but goes through the first and second first (quite obvious why this happens).

But how to make it right? I'm quite a noob with javascript so this is the best I could do and I ask for your guidance.

P.S. Sorry if I didn't explain it very good, english is not my native.

P.P.S. Sorry, I forgot to mention I can't edit HTML.

Move that div outside of the container element if you want to keep the arrow from pointing in the wrong direction... As for the arrow spinning like that, it's because you don't check the current position to know if for example... `nth-child(3)` should be set to `rotate(-135deg)` or `rotate(225deg)`. Maybe you should figure out a way to check the current position and depending on the result of that check use it to set the rotate degrees... — NewToJS, Mar 30 '17 at 09:57
Maybe this will be of some use if you decide to try this method https://css-tricks.com/get-value-of-css-rotation-through-javascript/ — NewToJS, Mar 30 '17 at 10:03
This isn't 100% as the reading don't seem to look correct to me but it's a starting point for you https://jsfiddle.net/Lvmf67rm/2/ Credit to this answer for the function on checking rotation degrees http://stackoverflow.com/questions/13592384/how-to-retrieve-the-angle-in-css3-rotate#answer-24803596 If you use that function and find it useful please upvote that answer to show credit. **Be sure to open browser console to view degrees output** — NewToJS, Mar 30 '17 at 10:13

score 0 · Answer 1 · answered Mar 30 '17 at 10:24

Regarding adding elements before or somewhere in-between the rectangle divs, here are some possible solutions:

Best option: Just don't do it. Add other elements outside the container and use CSS positioning to position.
Use :nth-of-type instead of :nth-child
Instead of :nth-child use classes q1, q2...

Regarding arrow direction: See how using -225deg in q4 changes the behaviour:

  $('.quarter:nth-child(4)').mouseenter(function(){
      console.log($('.pointer').css('transform'));  // get prev value
      $('.pointer').css('transform','rotate(-225deg)'); // instead of 135deg
  });

You can check the previous value to change the degrees dynamically, selecting the best option of the 2 candidates (where the absolute value of previous degrees - new degrees is minimal, adding or subtracting 360 degrees).

Element to point toward another element

1 Answers1