jQuery Funtionマウスポインタとマウスが動作しない

Question

私は要素をとし、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)"}); 
    } 
});