Cell background change on hover.

How is this done.

[chris_f]

Hi Guys and Gals,

I just been trawling the web and I can across the Real Media [entertainment.real.com] website. As you can see the left hand nav has the cell background colour change when you hover. This does not seem to be the normal way you do it with css and hovering a table cell. It is not an images and I their stylesheet doesn't seem to reveal any clues. Can anyone explain how this is done.

Chris.

[korkus2000]

looks tightly rapped up. I looked at a few pages and could only see a call to an off the page function that writes the navigation.

[chris_f]

Nice style. I guess it's too difficult to backward engineer. Anyone else have any suggestions on how this could be achieved?

Chris

[tedster]

No matter how they did it, it certainly CAN be done with CSS. You just need a separate class for each a:hover, such as a.a:hover, a.b:hover and so on. Each class gets a different background-color: rule.

[WibbleWobble]

Its ridiculously long code :/ Tedster's idea seems better.

[chris_f]

Am I missing something? How would you make the cell background change colour? If you use hover, only the background of the link text changes and not the whole cell. Has this got something to do with 'display: block;', if so, what? how do i use it? Why do I feeling this is going to be moved to the css forum ;).

Chris

[SethCall]

thats a good question Chris: I have HEARD there are ways to get a hover to show up as the whole block, but I have tried display:block quite a bit with no success.

[ikbenhet1]

can be done in a few ways.
Through css, and through javascript or dhtml.

.clickcell a, .clickcell a:link, .clickcell a:visited {
display: block;
width: 100%;
}

also see: [webmasterworld.com...] for the javascript version.

[chris_f]

Do I understand correctly. You would have something like

<td class="navigation">Entertainment</td>

And the css would look like

.navigation a:link, .navigation a:visited, .navigation a:active {
display: block;
width: 100%;
background-color: #ffffff;
}

.navigation a:hover{
display: block;
width: 100%;
background-color: #ffdddd;
}

Chris

[chris_f]

CSS Solution Here Curtious Of Nick_W [webmasterworld.com]

Chris