table cell color change on mouseover and mouseout

@raj_2006Jul 07.2010

Hi All,

I am trying to do something similar to ~~[url]~~http://www.kings-mall.co.uk/index.php?id=5[/url]

but mine will be in plain html with css and small amount of javascript.

I am not sure from where to start.Can you please give me an idea how to do mouseover in multiple td when mouseover in single one.

Many thanks,
Raj

to post a comment

CSS

@KDLAJul 07.2010 — #Take a look at this: http://www.alistapart.com/articles/sprites

@raj_2006authorJul 07.2010 — #I checked.Thanks.

But its not what I am looking for.

Something like this

[code=html]<TABLE BORDER="2" CELLPADDING="2" WIDTH="100%">
 <TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor=''">
 <TD width="29%">Cat1</TD>
 <TD width="40%">Cat2</TD>
 <TD width="31%">Cat 3 </TD>
 </TR>
 <TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
 <TD>1</TD>
 <TD>2</TD>
 <TD>3</TD>
 </TR>
 <TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
 <TD>4</TD>
 <TD>5</TD>
 <TD>6</TD>
 </TR>
 <TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
 <TD>7</TD>
 <TD>8</TD>
 <TD>9</TD>
 </TR>
 <TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
 <TD>10</TD>
 <TD>11</TD>
 <TD>12</TD>
 </TR>
 </TABLE>[/code]

When I will mouseover "cat 1" cell the bg color of cell 2 5 8 will be changed....is it possible using nested css?

@KDLAJul 07.2010 — #I suggest a stylesheet switcher that is activated via mouseover. That way, you can apply classes to the <td>.

@raj_2006authorJul 07.2010 — #Yes exactly.....is there any resource or any example to start with...

@KDLAJul 07.2010 — #This is a start: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

The click function would be a hover function, in your case.

table cell color change on mouseover and mouseout

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

table cell color change on mouseover and mouseout

5 Comments(s) ↴

Also in #CSS ↴

Success!

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

Social

Version

5 Comments(s) _↴

Also in #CSS _↴