jQuery Funtion Mouseenter和Mouseleave不工作

Question

我正在努力使元素.circle1在鼠标悬停在＆＃34;环＆＃34;上进行CSS转换来回移动。使用jQuery的元素。但是，这不起作用，并希望了解我的错误。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

选择器未正确用于圆圈。

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