BrijBhasin
asked on
Changing Table Cell color at a Mouse Over event
Hi,
Does anyone know if it is possible to change color of an entire table cell on a Mouse over event. What I want to do is instead using a:hover for the link I want to use CSS to change color of the entire table cell of the link. I know I can do this using Images rollovers or javascript, but want to find out if there is anyway to do it in CSS.
Thanks
Does anyone know if it is possible to change color of an entire table cell on a Mouse over event. What I want to do is instead using a:hover for the link I want to use CSS to change color of the entire table cell of the link. I know I can do this using Images rollovers or javascript, but want to find out if there is anyway to do it in CSS.
Thanks
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<html>
<head>
<title>untitled</title>
<style type="text/css">
.over { background-color:pink; }
.out { background-color:red; }
</style>
</head>
<body>
<table cellspacing="1" border="1">
<tr style="background:red;">
<td width="200" height="20" onmouseover="this.classNam
</tr>
<tr style="background:red;">
<td width="200" height="20" ></td><td width="200"></td><td width="200"></td>
</tr>
<tr style="background:red;">
<td width="200" height="20"></td><td width="200"></td><td width="200"></td>
</tr>
</table>
</body>
</html>
<head>
<title>untitled</title>
<style type="text/css">
.over { background-color:pink; }
.out { background-color:red; }
</style>
</head>
<body>
<table cellspacing="1" border="1">
<tr style="background:red;">
<td width="200" height="20" onmouseover="this.classNam
</tr>
<tr style="background:red;">
<td width="200" height="20" ></td><td width="200"></td><td width="200"></td>
</tr>
<tr style="background:red;">
<td width="200" height="20"></td><td width="200"></td><td width="200"></td>
</tr>
</table>
</body>
</html>
sorry lombardp, my last solution is almost identical to yours. - I did not refresh the page
:)
ASKER
Hi,
Your solutions worked great accept for when mouseout happens the mouse over color remains there instead of switching back to the original color. Any idea why this is happening?
Your solutions worked great accept for when mouseout happens the mouse over color remains there instead of switching back to the original color. Any idea why this is happening?
hello.
this script works well but i want a slight imprvisation. when clikced on a link that bg color has to change to some other color and has to stay like that. when clicked on another cell then the previously clicked cell's bg color returns to the normal one and the latest clicked one changes its color. in this process the other cells has to be in the same features that changing bg color when hovered and returning to normal color when mouse is not hovered.
can anyone help?
thanks.
Lakshman Pilaka.
this script works well but i want a slight imprvisation. when clikced on a link that bg color has to change to some other color and has to stay like that. when clicked on another cell then the previously clicked cell's bg color returns to the normal one and the latest clicked one changes its color. in this process the other cells has to be in the same features that changing bg color when hovered and returning to normal color when mouse is not hovered.
can anyone help?
thanks.
Lakshman Pilaka.
ping
.over { background-color:pink; }
.out { background-color:red; }
</style>