title: Hover Effect using CSS and Javascript/Prototype
body: <p>I have a 4x4 matrix of tiles. Each tile is basically a <code>div</code>. Now, I want to do the following:</p>
  
  <ul>
  <li>When the mouse pointer is on a particular tile, I have to check perform a check on that tile(using position and stuff, which i have already done). If the tile meets the requirements, then it should have a hover effect. </li>
  </ul>
  
  <p>Note: that the tiles keep changing positions, so at one moment the given tile must have the hover effect, but after rearrangement, it may not have it. And the rearrangement is not complete, ie i dont not reset the whole matrix. It involves only shifting a couple of tiles.</p>
  
  <p>I need to implement this using css class and javascript(prototype, not jquery). I set a hover style for class <code>hoverTile</code>. I added a mouseover to each tile, such that whenever the user's mouse is over a tile, my function is called, which sets the class for the html div element using <code>setAttribute</code>.
  Here is a summary:</p>
  
  <pre><code>Before:
  &lt;div&gt; ... &lt;/div&gt;
  
  After:
  &lt;div class="hoverTile"&gt; ... &lt;/div&gt;
  </code></pre>
  
  <p>Style:</p>
  
  <pre><code>.hoverTile: hover{
      text-color: red;
  }
  </code></pre>
  
  <p>This does not seem to work, even though the class name appears when i inspect the html page. What is the mistake here?</p>