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');
});