jQuery multiple class selection
<p>I am a bit confused with this:</p>

<p>I have a page with a set of buttons (i.e. elements with class attribute 'button'. The buttons belong to one of two classes (grp1 and grp2). </p>

<p>These are my requirements</p>

<ul>
<li><p>For buttons with class attribute 'enabled', when the mouse hovers over them, a  'button-hover' class is added to them (i.e. the element the mouse is hovering over). Otherwise, the hover event is ignored</p></li>
<li><p>When one of the buttons with class attribute 'grp2' is clicked on (note: it has to be 'enabled' first), I disable all 'buttons' in that group (i.e. remove the 'enabled' class for all elements with class 'grp2' (should probably selecting for elements with class 'button grp2' AND 'enabled' - but I am having enough problems as it is, so I need to keep things simple for now).</p></li>
</ul>

<p>This is what my page looks like:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
   &lt;title&gt;Demo&lt;/title&gt;
   &lt;style type="text/css"&gt;
     .button {border: 1px solid gray; color: gray}
     .enabled {border: 1px solid red; color: red}
     .button-hover {background-color: blue; }
   &lt;/style&gt;
   &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;div class="btn-cntnr"&gt;
      &lt;span class="grp1 button enabled"&gt;button 1&lt;/span&gt;
      &lt;span class="grp2 button enabled"&gt;button 2&lt;/span&gt;
      &lt;span class="grp2 button enabled"&gt;button 3&lt;/span&gt;
      &lt;span class="grp2 button enabled"&gt;button 4&lt;/span&gt;
   &lt;/div&gt;
   &lt;script type="text/javascript"&gt;
      /* &lt;![CDATA[ */
      $(document).ready(function(){

        $(".button.enabled").hover(function(){
            $(this).toggleClass('button-hover');
          }, function() {
            $(this).toggleClass('button-hover');
        });

        $('.grp2.enabled').click(function(){ $(".grp2").removeClass('enabled');});
       });      
      /* ]]&gt; */
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Currently, when a button with class 'grp2' is clicked on, the other elements with class 'grp2' have the 'enabled' class removed (works correctly).</p>

<p>HOWEVER, I notice that even though the class no longer have a 'enabled' class, SOMEHOW, the hover behavior is still applied to these elements (WRONG). Once an element has been 'disabled', I no longer want it to respond to the hover() event. </p>

<p>How may I implement this behavior, and what is wrong with the code above (i.e. why is it not working? (I am still learning jQuery)</p>
