Question

我需要在中心制作四个矩形和一个箭头，指向悬停的矩形。见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)');
  });
});

我做了两件事：

如果在矩形div之间或之间存在元素 - 箭头将指向错误的方向（这是因为“nth-child（）”选择不管类的子项）
当在第3和第4个矩形之间悬停时，箭头不会直接进入下一个区块，而是经过第一个和第二个区域（很明显为什么会发生这种情况）。

但是如何使它正确？我是一个非常喜欢javascript的菜鸟，所以这是我能做的最好的，我会请求你的指导。

P.S。对不起，如果我没有解释得很好，英语不是我的母语。

P.P.S。对不起，我忘了提及我无法编辑HTML。

Answer 1

关于在矩形div之前或之间添加元素，这里有一些可能的解决方案：

最好的选择：就是不要这样做。在容器外添加其他元素并使用CSS定位来定位。
使用:nth-of-type代替:nth-child
而不是:nth-child使用类q1，q2 ...

关于箭头方向：了解如何在q4中使用-225deg更改行为：

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

你可以检查前一个值来动态改变度数，选择2个候选者的最佳选项（其中前一个度数的绝对值 - 新度数最小，加上或减去360度）。

元素指向另一个元素

1 个答案: