title: Element with hover then click removes hover effect and click again adds hover again
body: <p>I am trying create a search word puzzle box with JQuery. Basically a table with an alphabet in each cell and the user needs to find and mark the words in the grid by clicking the table cells. So I am trying to combine the  clicks and hover events the following way:</p>
  
  <p>All  cells should have a hover highlight effect when the mouse is over except when it was already clicked. If it was clicked then it should just change to a different color to mark active selection so the hover effect is removed. Upon clicking again the selected cell it should revert back to its original state with the hover highlight effect added. Further clicks would just repeat the above mentioned toggle.</p>
  
  <p>How is it possible? I have tried the following with unbind(), bind() option but it didn't work. Thanks, Attila</p>
  
  <pre><code>$("#puzzleTable td").each(function(){
  $(this).hover(
     function(){
         $(this).css("background-color", "#FF6633");
     },
     function() {
         $(this).css("background-color", "#99CC00");
     }).toggle(
         function(){
         $(this).unbind('mouseenter mouseleave'),
         $(this).css("background-color", "#006699")
         },
         function(){      
         $(this).css("background-color", "#99CC00"),              
         $(this).bind('mouseenter mouseleave')
         }
     );
  });
  </code></pre>