Trigger CSS Übergang mit JavaScript

Question

Ich lerne JavaScript und habe ein einfaches Problem hier: Ich möchte eine CSS-Animation (Spin die blaue Nuss) auslösen, wenn ein anderes Element über JavaSript ONLY schwebt. Diese

ist das, was ich bisher habe, und ich weiß nicht, was ich in diesem Snippet bin fehlt:

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

Ich schätze Ihre Hilfe wirklich! Danke im Voraus!

Answer 1

Das einzige, was fehlt, ist 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> 

einen Blick auf diesen Code nehmen, hier zu arbeiten:

https://jsfiddle.net/j2bon1gc/

es nicht nur JQuery Eigentlich fehlte, aber um fehlte, war das eine jquery Version größer als 2,2, die es speziell zu arbeiten Version, die diese Funktion implementiert.

einen Blick hier nehmen: jQuery SVG, why can't I addClass?

Und in der Meta Frage für diesen Ich öffnete: Why isn't jQuery working in this question's code snippet?