javascript - jQuery 函数 Mouseenter 和 Mouseleave 不工作

Question

我正在尝试使元素 .circle1 使用 jQuery 从鼠标悬停在“ring”元素上通过 CSS 变换来回移动。但是，这不起作用，我想了解我的错误是什么。

$("#ring").on({
  mouseenter: function() {
    $(.circle1).css({
      "transform": "translateY(1000px)"
    });
  },
  mouseleave: function() {
    $(.circle1).css({
      "transform": "translateY(0px)"
    });
  }
});

#ring {
  background-size: contain;
  width: 50px;
  position: relative;
  top: 5px;
}
.circle1 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>
  <img id="ring" src="New Assets/ring5.png" alt="">
</a>
<div class="circle1">
  <li class="products"><a href="#">Products</a>
  </li>
</div>

Answer 1

选择器不适用于圆形。

$("#ring").on({
    mouseenter: function () {
         $(".circle1").css({"transform":"translateY(1000px)"});
    },
    mouseleave: function () {
        $(".circle1").css({"transform":"translateY(0px)"});
    }
});