hoverの有効無効の切り替えをJavaScriptで行いたい

前提・実現したいこと

前提
htmlにjavaScriptで１５パズルをとりあえず、数字を表示するところまで作成する。
実現したいこと
数字が配置されたらhoverを有効になるようにしたい
※配置されるまでは無効

発生している問題・エラーメッセージ

該当のソースコード

<head>
  <meta charset="utf-8">
  <title>1115</title>
	<style>
		

		table{
			
      border: solid 5px #404090;

		}

		td{
			
		
      border: solid 1px;
      width: 50px;
      height: 50px;
      text-align: center;
      font-size: 150%;

		}
		.hover:hover{
			
      border-color: #FF0000;
      color: #FF0000;

		}

	</style>

  <script type="text/javascript">
  <!--

	
	var label = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,""];	
	var len 	= label.length;																
	var max=4;																							
	
	function shuffle(){
		var rdm,tmp;

		for(var i=0;i<len;i++){

	
	
			rdm = Math.floor( Math.random() * len )
	  var a = label[i]
      label[i] = label[rdm]
      label[rdm] = a

      }

		}


	
	function start(){
		shuffle();							
		console.log( label );
    var aiue =document.getElementsByClassName('ta')
    for( i = 0; i < len; i++){
    aiue[i].innerHTML = label[i]
  }




	}

  -->
  </script>
</head>
<body>

  <h1>スライドパズル</h1>

	<p><button onclick="start();">ゲームスタート</button></p>

<table>
    <tr>
      <td class="ta">　</td>
      <td class="ta">　</td>
      <td class="ta">　</td>
      <td class="ta">　</td>
    </tr>
    <tr>
      <td class="ta">　</td>
      <td class="ta">　</td>
      <td class="ta">　</td>
      <td class="ta">　</td>
    </tr>
    <tr>
      <td class="ta">　</td>
      <td class="ta">　</td>
      <td class="ta">　</td>
      <td class="ta">　</td>
    </tr>
    <tr>
      <td class="ta">　</td>
      <td class="ta">　</td>
      <td class="ta">　</td>
      <td class="ta">　</td>
    </tr>
  </div>
 </table>

</body>
</html>