Question

我想创建一个菜单，其箭头始终指向我悬停光标的按钮，如果我不悬停在任何一个上，那么它会保留在我上次徘徊的地方。

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？

Answer 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切换类是可行的。

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

1 个答案: