oke so i got a project section on my site, in the iframe i put another page that will contain the projects formatted like this:
+---------+--------------------+
|.............|..........................|
|...pic......|.......tekst...........|
|.............|..........................|
+---------+--------------------+
now when i go over the row with my mouse i want the background color of the tekst cell (or entire row) to change color and be clickable... know what i mean or am i being really vague ? kinda like what www.ultrashock.com has going on in it's forum excuses for the little ASCII art there but ohwell
any idea on how this is done would be great
table bg color change on roll over?
Hi,
Here's an example of changing the table cell on rollover. I've also included the non table version.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- td { background-color: #CCCCCC; text-align:center; } .tbl a { width:100%; background-color: #CCCCCC; text-align: center; display:block; text-decoration: none; color:#000; } .tbl a:hover { text-decoration: none; background-color: #D1DCE9; color: #FF0000; } .rollover a { width:300px; background-color: #CCCCCC; border: 1px solid #000000; text-align: center; display:block; text-decoration: none; color:#000; } .rollover a:hover { text-decoration: none; background-color: #D1DCE9; color: #FF0000; } .rollover ul {list-style-type: none;} .rolllover p {margin:0px} --> </style> </head> <body> <table class="tbl" width="50%" border="1" cellpadding="0" cellspacing="0"> <tr> <td><a href="#">Hello</a></td> </tr> <tr> <td><a href="#">Hello</a></td> </tr> <tr> <td><a href="#">Hello</a></td> </tr> </table> <div class="rollover"> <ul> <li><a href="#">hello</a></li> <li><a href="#">hello</a></li> <li><a href="#">hello</a></li> <li><a href="#">hello</a></li> <li><a href="#">hello</a></li> </ul> </div> </body> </html>
I think it was what you were looking for. You should be able to work out what's going on otherwise just shout.
Paul
Hai, Even I have similar
Hai,
Even I have similar problem..I edited ur code(with table)to suite my needs but it is not working..although ur original code with table works fine. The moment I add "onmouseover" and "onmouseout" events..the background color doesn change at all...have pasted my code below. Please help me out..I am new to CSS
New Page 1
0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
About JNCASR Library
Library Rules
Library Statistics
Library Committee
Photo Gallery
Contact Us
Looking forward for ur help :?
How do you make it work for
How do you make it work for an entire row? I have a table that uses a lot of cells and when I use
.row2 td:hover { background-color: #CCCCCC; }
it only works for the currents cell, and rightly so. However if I change it to
.row2 tr:hover { background-color: #CCCCCC; }
it doesn't do anything. How can I set it so that it works with whole row? Here is the example: http://migcfdesign.com/einherjartues/listmembers.php?s=