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

【问题标题】：Rotate an object by exact transform degree when hover on a button将鼠标悬停在按钮上时，按精确的变换度旋转对象
【发布时间】：2017-11-27 12:14:18
【问题描述】：

我想创建一个菜单，其箭头始终指向我悬停光标的按钮，如果我没有悬停在任何按钮上，那么它会停留在我上次悬停的位置。

HTML：

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Test</title>
</head>
<body>
  <div class="container">
    <div class="first row">
      <button class="two btn btn-default col-xs-2  col-sm-offset-5   left">Second</button>
    </div>
    <div class="second row">
      <button class="one btn btn-default col-xs-2 col-sm-offset-2   left">First</button>
      <p class="col-xs-4 text-center">
        <span class="glyphicon glyphicon-arrow-up"></span>  
      </p>
      <button class="three btn btn-default col-xs-2   left">Third</button>
    </div>
    <div class="third row">
      <button class="four btn btn-default col-xs-2  col-sm-offset-5   left">Fourth</button>
    </div>
    </div>

</body>
</html>

SCSS：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 500px;
  height: 300px;
  background: lightgrey;
  margin-top: 50px;
  .first {
    height: 100px;
    display: flex;
    align-items: center;
  }
  .second {
    height: 100px;
    display: flex;
    align-items: center;
  }
  .third {
    height: 100px;
    display: flex;
    align-items: center;
  }
  p {
    color: white;
    font-size: 50px;
    transform: rotate(-90deg);
} 
}

.rotate-first{
   transform: rotate(0deg);
   transition: all 0.5s ease;
}
.rotate-second{
   transform: rotate(90deg);
   transition: all 0.5s ease;
}

.rotate-third{
   transform: rotate(180deg);
   transition: all 0.5s ease;
}
.rotate-fourth{
   transform: rotate(270deg);
   transition: all 0.5s ease;
}

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");
});

您可以查看代码here。

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

【问题讨论】：

标签： jquery css animation rotation transform

【解决方案1】：

当然。您只需在悬停时删除不同的旋转类，然后再添加相关的类。这样，一次只应用四个类中的一个，而不会卡住。

$(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() 之后但它没有工作，将类捆绑到一个变量中是一个非常好的主意！
没问题！请记住，您的操作将按照从左到右的顺序进行。所以如果你 addClass 然后 removeClass 之后，你就没有类了！您可以在每个函数中添加一个类并删除其他三个类，从而创建四个独特的函数（即添加 A、删除 BCD；添加 B、删除 ACD；等等），但更容易将它们全部删除然后添加您想要。