Hover stops working. What wrong?

Hiya folks,

Setup
It’s a 3x3 grid for my Tic Tac Toe project. A display box on top of the grid contains a button to play the game. When the play button is clicked, the box’s display is set to none, leaving only the grid visible to play on. The grid squares are supposed to turn grey on hover. If you click a square it turns blue. When the game is over all squares are reset to white and the display box shows up with the button to play again.

Problem
Hover stops working after you click the play button. Hover only works before you click play the first time.

Link
I’m sharing a snippet to show the problem in my actual project. I can’t figure out what is missing. Please advice.
https://codepen.io/surajr1711/pen/NyGaLN

Thanks and regards
Suraj

@surajr1711,
from just looking at your code, it seems that when the user clicks the play button all table data (td) elements get their background changed to none.

I removed that one line of code and the hover effect works. Take a look:

https://codepen.io/TomerBenRachel/pen/PQZpOE

I would also suggest to give ids to your element, making styling specific and not general.(I.E. give the Play button element an id).

$("button").click(function(){ <--- This line of code could cause you trouble
    reset();                                  if you have more than one button element
  });

Hope that helps and good luck