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
BrijBhasinAsked:
Who is Participating?
 
lombardpCommented:
Similar to Yzlat, but CSS-based.

<html>
<head>
<style>
.classover {background-color: #ff0000;}
</style>
</head>

<body>
<table>
<tr>
   <td  onmouseover="this.className='classover'" onmouseout="this.className=''">aaa</td>
   <td  onmouseover="this.className='classover'" onmouseout="this.className=''">aaa</td>
</tr>
<tr>
   <td  onmouseover="this.className='classover'" onmouseout="this.className=''">aaa</td>
   <td  onmouseover="this.className='classover'" onmouseout="this.className=''">aaa</td>
</tr>
</table>

</body>
</html>
0
 
YZlatCommented:
use javascript:
<html>
<head>
<script language="javascript".
<!--
function changeCellBG(el, myColor) {
      el.style.background =myColor;
}

//-->
</script>
</head>
<body>
<table cellspacing="1" border="1">
<tr style="background:red;">
<td width="200" height="20" onMouseOver="changeCellBG(this, 'pink');"></td><td width="200" onMouseOver="changeCellBG(this, 'pink');"></td><td width="200" onMouseOver="changeCellBG(this, 'pink');"></td>
</tr>
<tr style="background:orange;">
<td width="200" height="20" onMouseOver="changeCellBG(this, 'pink');"></td><td width="200" onMouseOver="changeCellBG(this, 'pink');"></td><td width="200" onMouseOver="changeCellBG(this, 'pink');"></td>
</tr>
<tr style="background:yellow;">
<td width="200" height="20" onMouseOver="changeCellBG(this, 'pink');"></td><td width="200" onMouseOver="changeCellBG(this, 'pink');"></td><td width="200" onMouseOver="changeCellBG(this, 'pink');"></td>
</tr>

</table>
</body>
</html>
0
 
YZlatCommented:
<style type="text/css">

.over { background-color:pink; }
.out  { background-color:red; }

</style>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
YZlatCommented:
<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.className='over'" onmouseout="this.className='out'"></td><td width="200" onmouseover="this.className='over'" onmouseout="this.className='out'"></td><td width="200" onmouseover="this.className='over'" onmouseout="this.className='out'"></td>
</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>
0
 
YZlatCommented:
sorry  lombardp, my last solution is almost identical to yours. - I did not refresh the page
0
 
lombardpCommented:
:)
0
 
BrijBhasinAuthor Commented:
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?

0
 
lakshmanatessarCommented:
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.
0
 
JackOfPHCommented:
ping
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.