• Locked
3 replies [Last post]
Thu, 2003-08-28 21:55
Raziel
Offline
newbie
netherlands
Last seen: 18 years 45 weeks ago
netherlands
Joined: 2003-08-28
Posts: 3
Points: 0

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 Tongue excuses for the little ASCII art there but ohwell Tongue any idea on how this is done would be great

Top
Tags:
Sun, 2003-08-31 16:49
#1
Pob
Offline
Enthusiast
Hampshire UK
Last seen: 11 years 4 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

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

Top
Fri, 2007-11-23 09:58
#2
Siya
Offline
newbie
India
Last seen: 14 years 32 weeks ago
India
Joined: 2007-11-23
Posts: 1
Points: 0

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

About Us

Looking forward for ur help :?

Top
Sat, 2008-11-29 04:01
#3
MIGhunter
Offline
Regular
Indiana
Last seen: 12 years 4 weeks ago
Indiana
Timezone: GMT-4
Joined: 2007-12-22
Posts: 37
Points: 3

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=

Top
  • Locked