Question

I have a 4×4 matrix of tiles. Each tile is basically a div. Now, I want to do the following:

• 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.

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.

I need to implement this using css class and javascript(prototype, not jquery). I set a hover style for class hoverTile. 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 setAttribute.
Here is a summary:

Before:
<div> ... </div>

After:
<div class="hoverTile"> ... </div>

Style:

.hoverTile: hover{
    text-color: red;
}

This does not seem to work, even though the class name appears when i inspect the html page. What is the mistake here?

Answer 1

Look at the demo I set up for you HERE

2 issues:

1) your seudo-selector (:hover) shouldn’t have a space after the colon (:).

2) text-color should just be color