cell bgcolor change on a:hover

@cmotorNov 08.2004

I want to change the background color of a cell when the mouse is put over the cell. I have found that background-color: #000000 will change only the background of the text in the cell. I want the entire cell background to change color, not the background of just the text.

Please help.

-cmotor

to post a comment

CSS

@ray326Nov 08.2004 — #Define "cell".

@HaganeNoKokoroNov 08.2004 — #You'll have to be a little more clear. From the a:hover in the title of your post, it sounds like you're trying to get a table cell to change color when you mouse over a link inside the cell. Why not just use td:hover (aside from it doesn't work in IE without a weensy javascript workaround)

your css could be something like:

td.hov {
 width:200px;
 height:200px;
 background-color:#666666;
 behavior:url(IEHover.htc);
 }
 
 td.hov:hover, td.hovhover {
 /*same style as above, but different color*/
 width:200px;
 height:200px;
 background-color:#662299;
 behavior:url(IEHover.htc);
 }

and IEHover.htc looks like this

&lt;public:attach event="onmouseover" onevent="hoverOn()" /&gt;
 &lt;public:attach event="onmouseout" onevent="hoverOff()" /&gt;
 &lt;script type="text/javascript"&gt;
 function hoverOn() {
 element.className+= "hover";
 }
 
 function hoverOff() {
 element.className=element.className.replace(/hover/g, "");
 }
 &lt;/script&gt;

By the way, I heard of this approach of working around IE's CSS limitations in Vladdy's pure CSS menu.

@BonRougeNov 08.2004 — #I think this :

[B]* html td a {width: 100%;}[/B]

is the key.

Check it out

[CODE]
 <style type="text/css">
 td a {
 text-decoration:none;
 background-color:red;
 color:navy;
 display:block;
 }
 
 * html td a {
 width: 100%;
 }
 
 td a:hover {
 background-color:navy;
 color:red;
 }
 
 
 </style>
 
 </head>
 <body>
 
 <table>
 <tr>
 <td><a href="">This is the first line</a></td>
 <td><a href="">This is the second line</a></td>
 <td><a href="">This is the third line</a></td>
 <td ><a href="">This is the fourth line</a></td>
 </tr>
 <tr>
 <td><a href="">This is the fifth line</a></td>
 <td><a href="">This is the sixth line</a></td>
 <td><a href="">This is the seventh line</a></td>
 <td><a href="">This is the eighth line</a></td>
 </tr>
 </table>
 
 </body> [/CODE]

@JohnWorfinDec 01.2004 — #tag for good info

cell bgcolor change on a:hover

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

cell bgcolor change on a:hover

4 Comments(s) ↴

Also in #CSS ↴

Success!

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

Social

Version

4 Comments(s) _↴

Also in #CSS _↴