Element with hover then click removes hover effect

Question

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:

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.

How is it possible? I have tried the following with unbind(), bind() option but it didn't work. Thanks, Attila

$("#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')
       }
   );
});

Answer 1

I would do it all by binding two events: the click and the hover. Each of these would have their own logic to work out and would operate independently of one-another. Further, since all you want to do is effect cosmetic changes, you could do it by adding/removing CSS classes rather than updating the CSS directly (ie. with inline styles).

Here's a fiddle: http://jsfiddle.net/VCf3E/

Sample function (classes and colours not taken from your sample code):

$('table td')
    .hover(
   function(){
       $(this).addClass('hover');
   },
   function() {
       $(this).removeClass('hover');
   })
    .click(
    function() {
       $(this).toggleClass('active');
});

Answer 2

Your code doesn't specify an event handler when it rebinds the mouseenter and mouseleave events. However, if you use CSS classes to apply your styles, you won't have to unbind and rebind the mouse events at all. Simply define your "clicked" state rules such that they override the "hover" state rules. This is pretty easy, especially if you don't need to support IE6 (IE6 solution included below as well):

CSS Styles:

td {
    background-color: #99CC00;
}

td:hover {
    background-color: #FF6633;
}

td.clicked, td.clicked:hover {
    background-color: #006699;
}

Javascript:

$("#puzzleTable td").click(function () { $(this).toggleClass('clicked'); });

---

If you need to support IE6, it gets a bit more complex (since IE6 only supports :hover on anchor elements):

CSS:

td {
    background-color: #99CC00;
}

td.hover {
    background-color: #FF6633;
}

td.clicked {
    background-color: #006699;
}

Javascript:

var cells = $('#puzzleTable td');
cells.bind('mouseenter mouseleave', function() { $(this).toggleClass('hover'); });
cells.click(function() { $(this).toggleClass('clicked'); });