javascript - jQuery函数Mouseenter和Mouseleave无法正常工作

我正在尝试使用jQuery从鼠标悬停在“ ring”元素上的CSS转换来使元素.circle1来回移动。但是，这不起作用，希望对我的错误有一些了解。

$("#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>

最佳答案

选择器未正确用于圆形。

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