JavaScriptでトリガCSSトランジション

Question

私はJavaScriptを学んでおり、ここでは簡単な問題があります。 Javaスクリプトだけで別の要素がホバリングされたときに、CSSアニメーション（ブルーナットを回転させます）をトリガしたいと思います。

これは私がこれまで持っているものである、と私は、このスニペットに欠けているのか分からない：

$('#menu').hover(
 
    function() { 
 
    $('#nut').addClass('spin'); 
 
    }, 
 
    function() { 
 
    $('#nut').removeClass('spin'); 
 
    } 
 
);

#nut { 
 
    transform-origin: center center; 
 
    transform-style: preserve-3D; 
 
    transition: all 1s ease; 
 
} 
 

 
.spin { 
 
    transform: rotate(180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="menu" x="0px" y="0px" width="71.39px" height="71.39px" viewBox="0 0 71.39 71.39" enable-background="new 0 0 71.39 71.39" xml:space="preserve"> 
 
    <polygon id="nut" fill="#0000ff" points="66.605,53.541 35.694,71.388 4.784,53.541 4.784,17.849 35.694,0.002 66.605,17.849"/> 
 
</svg>

私は本当にあなたの助けに感謝します！前もって感謝します！

Answer 1

唯一欠けているのはjqueryです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<svg id="menu" x="0px" y="0px" width="71.39px" height="71.39px" viewBox="0 0 71.39 71.39" enable-background="new 0 0 71.39 71.39" xml:space="preserve"> 
    <polygon id="nut" fill="#0000ff" points="66.605,53.541 35.694,71.388 4.784,53.541 4.784,17.849 35.694,0.002 66.605,17.849"/> 
</svg> 

ここで働いて、このコードを見てみましょう：

https://jsfiddle.net/j2bon1gc/

は、実際にはjqueryのを欠いていただけでなく、動作するためには特別だった2.2よりも大きいjqueryのバージョンを、欠けていましたこの機能を実装したバージョン

こちらをご覧ください：jQuery SVG, why can't I addClass?

をそして、私はこのために開かれたメタ質問に：Why isn't jQuery working in this question's code snippet?

素晴らしい作品が、これは奇妙に聞こえるかもしれません