Jquery 将鼠标悬停在按钮上时，按精确的变换度旋转对象

我想创建一个菜单，它的箭头总是指向我悬停光标的按钮，如果我没有悬停在任何按钮上，它就会停留在我上次悬停的位置

HTML:

JQuery：

$("button.one").hover(function(){
    $("span").addClass("rotate-first");
});
$("button.two").hover(function(){
    $("span").addClass("rotate-second");
});
$("button.three").hover(function(){
    $("span").addClass("rotate-third");
});
$("button.four").hover(function(){
    $("span").addClass("rotate-fourth");
});

你可以检查代码

---

CSS也可以吗？还是只有JS？

当然。在将相关的旋转类添加回来之前，您只需要在悬停时删除不同的旋转类。这样，一次只应用四个类中的一个，并且您不会陷入困境

$(function(){
  var spanClasses = 'rotate-first rotate-second rotate-third rotate-fourth';

  $("button.one").hover(function(){
      $("span").removeClass(spanClasses).addClass("rotate-first");
  });
  $("button.two").hover(function(){
      $("span").removeClass(spanClasses).addClass("rotate-second");
  });
  $("button.three").hover(function(){
      $("span").removeClass(spanClasses).addClass("rotate-third");
  });
  $("button.four").hover(function(){
      $("span").removeClass(spanClasses).addClass("rotate-fourth");
  });
});

---

至于这是否可能仅仅是CSS：不，不是我能想到的任何方式。您可以使用CSS在悬停时旋转箭头，但是当您删除悬停时，默认情况下箭头会弹回到它所在的位置。通过JavaScript切换类是一个不错的选择。

谢谢！我尝试了removeClass（），虽然我把它放在了addClass（）之后，但它不起作用，将这些类捆绑到一个变量中是一个非常好的主意！没问题！请记住，您的操作将按从左到右的顺序进行。所以如果你先添加类，然后再删除类，你就没有类了！您可以在每个函数中添加一个类并删除另外三个类，从而生成四个唯一的函数（即，添加A、删除BCD、添加B、删除ACD等），但只需将它们全部删除，然后添加所需的函数就更容易了。

$("button.one").hover(function(){
    $("span").addClass("rotate-first");
});
$("button.two").hover(function(){
    $("span").addClass("rotate-second");
});
$("button.three").hover(function(){
    $("span").addClass("rotate-third");
});
$("button.four").hover(function(){
    $("span").addClass("rotate-fourth");
});

$(function(){
  var spanClasses = 'rotate-first rotate-second rotate-third rotate-fourth';

  $("button.one").hover(function(){
      $("span").removeClass(spanClasses).addClass("rotate-first");
  });
  $("button.two").hover(function(){
      $("span").removeClass(spanClasses).addClass("rotate-second");
  });
  $("button.three").hover(function(){
      $("span").removeClass(spanClasses).addClass("rotate-third");
  });
  $("button.four").hover(function(){
      $("span").removeClass(spanClasses).addClass("rotate-fourth");
  });
});