jQuery的Funtion的MouseEnter和鼠标离开不工作

Question

我试图使元素.circle1来回移动与CSS使用jQuery的“环”元素从鼠标悬停时变换。但是，这不起作用，并希望了解我的错误是什么。

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