Cell bg and link text change on hover of cell

@maryb86Feb 10.2007

This is what I would like to happen:

–

When a user hovers over a cell it changes the background colour

–

When a user hovers over a cell it changes the link colour of the text that is inside of it

–

I want both of these to happen when the cell is hovered over, not just the text

At the moment I have got the first one working. When a user hovers over the cell the background colour changes. The problem is that at the moment when the user hovers over the cell the text link colour does not change, it only changes when the user physically overs over the text link part.

How can I do this?

Here is what I am using at the moment:

[CODE]<table class=”menu” align=”right” cellpadding=”5″ cellspacing=”5″> <!–MENU TABLE–>

<tr>

<td class=”menu1″ bgcolor=”#B5E0FF” onMouseOver=”style.backgroundColor=’#DBE6F3′; style.cursor=’hand’;”

onMouseOut=”style.backgroundColor=’#B5E0FF’;” onClick=”‘#'”>

<font color=”#034A98″><span class=”nav1″><a href=”#”>About M.E. DESIGNS</a></span></font>

</td>

</tr><tr>

<td class=”menu1″ bgcolor=”#A6BBEA” onMouseOver=”style.backgroundColor=’#DBE6F3′; style.cursor=’hand’;”

onMouseOut=”style.backgroundColor=’#A6BBEA’;” onClick=”‘#'”>

<font color=”#0084FF”><a href=”#”>Portfolio</a></font>

</td>

</tr><tr>

<td class=”menu1″ bgcolor=”#738BB7″ onMouseOver=”style.backgroundColor=’#DBE6F3′; style.cursor=’hand’;”

onMouseOut=”style.backgroundColor=’#738BB7′;” onClick=”‘#'”>

<font color=”#5DB6FA”><a href=”#”>Benefits</a></font>

</td>

</tr><tr>

<td class=”menu1″ bgcolor=”#034A98″ onMouseOver=”style.backgroundColor=’#DBE6F3′; style.cursor=’hand’;”

onMouseOut=”style.backgroundColor=’#034A98′;” onClick=”‘#'”>

<font color=”#86C9FE”><a href=”#”>Contact Information</a></font>

</td>

</tr>

</table>[/CODE]

This is the css relating to the links:

[CODE].nav1 a:link {color: #034A98; text-decoration: none;} .nav1 a:visited {color: #034A98; text-decoration: none;} .nav1 a:active {color: #738BB7; text-decoration: none;} .nav1 a:hover {color: #738BB7; text-decoration: none;}[/CODE]

I am only working on the first cell at the moment, so there’s only the css for that one cell. Once I get the first one working I will do the same for the other 3 cells.

I really don’t know much about javascript and using spans in css so most of the stuff in there is taken from other websites.

Also, is it possible to do this with only css? or can it only be done with the little bit of what I think is javascript?

to post a comment

CSS

10 Comments(s) _↴

@ryanbutlerFeb 10.2007 — #To make the entire cell clickable or "hot" so that the color changes on a mouse roll over, set this on your cells:

[CODE]<td class="menu1" bgcolor="#738BB7" onMouseOver="style.backgroundColor='#DBE6F3'; [B]style.display='block'[/B]; 
 style.cursor='hand';" onMouseOut="style.backgroundColor='#738BB7';" onClick="'#'">[/CODE]

And yes, you could do this solely in CSS, it would take a little bit of a re-work of your code. If you need some guidance, let us know. I'm currently a bit tired, but but I'm willing to help if you can't figure it out.

@maryb86authorFeb 10.2007 — #Thankyou for helping me. However, I do not think that you understand completely what I am saying. The whole cell does change colour, it's just the text that doesn't change colour when you hover over the cell. It only changes colour when you hover over the link inside the cell.

@WebJoelFeb 10.2007 — #Thankyou for helping me. However, I do not think that you understand completely what I am saying. The whole cell does change colour, it's just the text that doesn't change colour when you hover over the cell. It only changes colour when you hover over the link inside the cell.[/QUOTE] If I understand you correctly, you want the cell AND the anchor text to change at the same time? There is a quicker, leaner *htc ("htaccess") that would do this, but keeping with what you have now, you could just increase the padding of the anchor to coincide with the dimensions of the TD, therefore, hovering anywhere in the TD would also activate the link color. It might not though, -the two might compete against each other.

Here is the *htc information and an example at the bottom-left of the page:

http://www.vladdy.net/demos/iepseudoclassesfix.html

@ryanbutlerFeb 11.2007 — #I have no unearthly idea why you need a .htaccess file to do this or why cell padding would do the trick. If you want the cell text and cell itself to change on a mouse hover, look at this modified code:

[CODE]<html>
 <head>
 <style type="text/css" media="screen">
 
 table#menu{
 padding:5px;
 }
 table#menu td{
 background-color:#B5E0FF;
 }
 table#menu td a{
 display:block;
 text-decoration:none;
 }
 table#menu td a:link{
 background-color:#DBE6F3;
 color:#000;
 }
 table#menu td a:visited{
 background-color:#ff0000;
 }
 table#menu td a:hover{
 background-color:#A6BBEA;
 color:#ff0000;
 }
 table#menu td a:active{
 background-color:#ccc;
 }
 
 </style>
 </head>
 <body>
 <table id="menu" align="right" cellspacing="5"> 
 <!--MENU TABLE-->
 <tr>
 <td><a href="javascript:;" onClick="#">About M.E. DESIGNS</a></td>
 </tr>
 <tr>
 <td><a href="javascript:;" onClick="#">Portfolio</a></td>
 </tr>
 <tr>
 <td><a href="javascript:;" onclick="#">Benefits</a></td>
 </tr>
 <tr>
 <td><a href="javascript:;" onClick="#">Contact Information</a></td>
 </tr>
 </table>
 </body>
 </html>[/CODE]

What makes the text and cell change color on a mouse over is the use of the hover pseudo-state. More importantly, what makes the entire cell change color on a hover is setting the display of all anchors inside the table cell to block.

Sorry I had to re-do your code, but it was making my head hurt worse than it already was with 3 advils in my system ?

If this isn't what you want, you'll need to be specific.

@WebJoelFeb 11.2007 — #I have no unearthly idea why you need a .htaccess file to do this ...[/QUOTE] Because IE incorrectly handles pseudo-class and unless the <TD> is also the anchor, you will not get the :hover to work (you have javscript doing it instead, -which is okay unless someone turns their *js off). *htc can solve this.

Nice example there, -but is that what the OP wanted? It doesn't seem to fit the criteria as I understand it. Hovering in the red box isn't changing the color of the text. The second and third boxes have 'space' to the right of the text, -hover over [I]that[/I], -the anchor text doesn't change (in IE). Only hovering over the actual anchor text is changing it. What you have here could just as easily be accomplished using css without the javascript. I thought OP wants the anchor text to change too, even when it is 'just the container TD' is hovered-over. ? No larger than the cells are, one could just use small images that, on-hover, shift position to reveal a similar other-state image (a.k.a. "CSS Sprites").

I'll see if I can write-up a working *htc example. ?

Springfield, MO, eh? I have family out there at Ft. Wood A. B.. Been to Springfield a few times, -great big BASS PRO shop you have out there! ? GREAT BIG Kodiak Grizzly Bear there, standing by staircase...
----------------------------------------------------------------------

( edit: -back. )

Attached is a ZIP file. This is a TABLE with four TD cells, with a(n) *htc file that governs it. Note that TD cell 2, 3 and 4 changes background-color [I]and[/I] anchor-text color, but that the pointer-tool remains a 'pointer' until it touches the actual 'anchor', whereby it becomes a 'hand' (indicating a hyperlink). I was thinking that increasing the 'padding' around the "<a href="#"></a>" would work. -It appears to, -to a degree...

But, -I can't get the FIRST "td" to do the same! :o -It wants to be a 'hand' everywhere on-hover over the TD.... it should be a 'pointer' until it hovers-over the actual [I]anchor[/I]...

Anyway, -this is crude (and the htaccess does have javascript in it, -I thought that this was *js-free).

Looks the way I [I]think[/I] that the OP wanted it... but this thing totally throws a wobbly in Firefox (>ah-hem<... HELP, someone! :o ).

[upl-file uuid=1861e4b4-4371-4bec-ac7c-e2a36679c464 size=909B]td-hover.zip[/upl-file]

@ryanbutlerFeb 12.2007 — #Because IE incorrectly handles pseudo-class and unless the <TD> is also the anchor, you will not get the :hover to work (you have javscript doing it instead, -which is okay unless someone turns their *js off). *htc can solve this.
[/quote]

I have no JS going on in my example. The anchor tag is being targeted by CSS, javascript in the href parameter is just an argument.

Nice example there, -but is that what the OP wanted? [/quote]

I have no idea what the poster is after, though I still think it can be accomplished without a .htaccess file. That's the problem ?

Springfield, MO, eh? I have family out there at Ft. Wood A. B.. Been to Springfield a few times, -great big BASS PRO shop you have out there! ? GREAT BIG Kodiak Grizzly Bear there, standing by staircase...[/quote]

Yep. Ft. Wood is about 2 hrs away. Bass Pro, kind of like the Punch Bowl in Hawaii ?

@maryb86authorFeb 12.2007 — #Thankyou all for your replies, I shall be testing them out hopefully today. There's just a lot going on!

@WebJoelFeb 12.2007 — #I have no JS going on in my example. The anchor tag is being targeted by CSS, javascript in the href parameter is just an argument.[/QUOTE] My opps, -I didn't mean to write [I]you[/I], I meant 'the original postee' has javascript, those "[I]onMouseOver[/I]="style.backgroundColor='#DBE6F3';" and "[I]onMouseOut[/I]="style.backgroundColor='#738BB7';" to try to affect the color-change. I had thought *htc was javascript-less, but it too, employs some small javascript. -If I turned-off javascript, -or was using WebTV (which cannot handle any javascript), -would "onMouseOver"/"onMouseOut" still work? ? I would do things with CSS-[I]only[/I] and no javascript at all, if I had my wish.

I can't figure out why my first TD behaves like a [I]link[/I] (pointer-tool shows "[I]hand[/I]") anywhere inside of TD, but the 2nd, 3rd and 4th TD, pointer-tool shows "pointer" until you actually hover over the text-link. ?

I've done this before... now I can't seem to make it work. At this juncture I'd like to know more about what the OP was after... ?

Bass Pro in Springfield... -[I]is the old black Earnhart car still showcased there[/I]? ?

@maryb86authorFeb 14.2007 — #Lol thanks for all of the help!

I would rather it work with as little javascript as possible and without a htaccess file if poss.

What RYANBUTLER gave was close. However, I wanted it so that when you hover over any point inside the TD, the TD background and the text change colour. I understand that this was done because if the user clicks anywhere in the TD then they won't be taken anywhere, it's only if they click on the hyperlink text that they will. If it is possible I would love it to work in a way that if they click anywhere on the TD they can be taken to the link. If this was not possible then I would settle for the coding given by RYANBUTLER.

@rewindMar 26.2007 — #Wow, I hope you folks figure out how to do this, I'm trying to do almost the same thing. The only difference being that I want the text color in a table to change along with a background image when you mouse anywhere on the cell. Clicking anywhere in the cell will take you to the link.

I am a novice, an idiot, I can barely write html, but I wrote something that almost does what the OP wants. There are two problems however, and if I can figure out a way to solve them I'll be in pig-heaven.

I stuck this in the header

<style>

a:hover { color: red; }

</style>

and defined a table like this

<table>

<tbody>

<tr>

<td>

<a href="http://go-here.html"><img src="http://image1.jpg"

onmouseover="this.src='http://image2.jpg'"

onmouseout="this.src='http://image1.jpg'">

<span style="position: absolute; top: 5px; left: 50px;">Go-Here</span>

</a> </td>

</tr>

</tbody>

</table>

The two problems are,

1, when you hover directly over the hot-link, the background image reverts back, and,

2, Mozilla reads the atribute "position: absolue;" wrong - it calculates from the edges of the browser instead of from inside the table like all the other browsers. [beats head against the wall]

Like I said, I'm a moron and just learning, but since I did get both the text to change color and the link to be active when you move the mouse inside the table cell, I thought I'd post this.

Hope someone can figure out a neat way to do this, thanks.

Newbie ?

Also in #CSS _↴

Which version of Windows IE 5 for testing purposes?Where's the 1px image?!important

Success!

Help @maryb86 spread the word by sharing this article on Twitter...

Tweet This

Cell bg and link text change on hover of cell

10 Comments(s) _↴

Springfield, MO, eh? I have family out there at Ft. Wood A. B.. Been to Springfield a few times, -great big BASS PRO shop you have out there! ? GREAT BIG Kodiak Grizzly Bear there, standing by staircase...
----------------------------------------------------------------------

Also in #CSS _↴

Success!

Social

Version

Cell bg and link text change on hover of cell

10 Comments(s) ↴

Springfield, MO, eh? I have family out there at Ft. Wood A. B.. Been to Springfield a few times, -great big BASS PRO shop you have out there! ? GREAT BIG Kodiak Grizzly Bear there, standing by staircase... ----------------------------------------------------------------------

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Springfield, MO, eh? I have family out there at Ft. Wood A. B.. Been to Springfield a few times, -great big BASS PRO shop you have out there! ? GREAT BIG Kodiak Grizzly Bear there, standing by staircase...
----------------------------------------------------------------------

Also in #CSS _↴