The .addClass() doesn't seem to work
<p>On my first project ever, I'm trying to combine <strong>.hover</strong> with <strong>.addClass()</strong> to highlight the div under the mouse pointer.</p>

<p>It should be fairly simple, but i can't get it to work, here's what i wrote so far:</p>

<p><strong>jQuery:</strong></p>

<pre><code>$(document).ready(function() {
    $('#NewItem').hover(function() {        
        $('#NewItem').addClass('active');
    });
});
</code></pre>

<p><strong>css</strong></p>

<pre><code>div {
    border-radius: 5px;
    transition: background-color 0.5s ease;
}

#NewItem {
    border: 1px solid #000000;
    background-color: #F0F8FF;
    Width: 100px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    z-index: 5;
    text-align: center;
}

.active {
    background-color:#556677;
}
</code></pre>

<p><strong>html</strong></p>

<pre><code>&lt;body&gt;
    &lt;div id="background"&gt;
         &lt;div id="NewItem"&gt;             
            &lt;p&gt; Add item &lt;/p&gt;
         &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>Trying to find out what i got wrong i switched ".addclass('active')" with ".hide()" and it did make the div disapear.</p>