jquery - ホバー時に複数の div を持つ td を強調表示し、div の 1 つで強調表示を解除します

Question

これは、以前に尋ねた質問の拡張です。 <td> の内部に複数の <div> がある場合、CSS のホバー効果が <td> で正しく動作しない

以下に複数のdivを含むtdがあります。コードは次のとおりです

 <td>
  <div style="display:inline-block; border:1px solid red">left</div>
   <div style="display:inline-block">
   <div style="display:inline-block; border:1px solid blue">top left</div>
   <div id="imgMapDiv"style="display:inline-block; border:1px solid green">top right</div>
   <div>bottom </div>  
  </div>
</td>

これは私のCSSです

#MyTable td:hover { background: #cccccc; }

私が達成したいこと: マウスが TD に入ると、列全体が強調表示されるはずです - 私はこの部分を持っています。

ただし、ハイパーリンクであるため、マウスが id imgMapDiv の div に入ると、TD 全体が強調表示されないようにする必要があります。- これは、私が問題を抱えている部分です。

クラスを切り替えるjQueryの方法をいくつか試しましたが、TDがハイライトクラスを失うと、二度と戻りません。ここでは、CSS のみまたは CSS javascript 、jquery ソリューションのいずれかを探しています。