can CSS highlight multiple table cells at once? 1

[mike2228]

Hi,

(note: I cannot have client-side scripting, like dhtml)

I am trying to build an html table that has 10 columns and N number of rows of data. When a mouse hovers over a cell in column 2 and row x, I would like the background of cell(2,x) to change AND the background of cell(5,x) to change to the same color. Basically, I would like css to change the background color of two cells in the same row when there is a mouse hover. However, I do not want to highlight the entire row on mouse hover... just 2 cells on that particular row.

I would be fine hard-coding each cell to tell it what to do and when and where.... the page is being dynamically built by a server-side scripting langauge, so I can script the css into each cell. What is most important is that the color changing behavior happens when the client moves his/her mouse over various cells in the table.

Please let me know if this can be done using just css. If yes, please provide some sample code (if possible).

Thank you in advance!

-Mike

 

[vacunita]

Just give the cells you wish to highlight a class and have it be applied on hover of the row:

tr:hover td.highlightME{
background-color:red;


}


...



<tr><td class="highlightME">highlight cell</td><td>not highlighted</td><td class="highlightME">highlight cell</td></tr>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[feherke]

Hi

Not really clear what the condition is, but let me try some interpretations :
[ul]
[li]If you want to color cell 2 and cell 5 of the row under mouse pointer

tr[teal]:[/teal]hover td[teal]:[/teal]nth[teal]-[/teal]of[teal]-[/teal]type[teal]([/teal]2[teal]),[/teal]
tr[teal]:[/teal]hover td[teal]:[/teal]nth[teal]-[/teal]of[teal]-[/teal]type[teal]([/teal]5[teal])[/teal] [teal]{[/teal]
  [COLOR=coral]background-color:[/color] [COLOR=darkgoldenrod]teal[/color];
[teal]}[/teal]

[/li]
[li]If you want to color cell 2 and cell 5 of the row under mouse pointer

td[teal]:[/teal]hover[teal],[/teal]
tr[teal]:[/teal]hover td[teal]:[/teal]nth[teal]-[/teal]of[teal]-[/teal]type[teal]([/teal]5[teal])[/teal] [teal]{[/teal]
  [COLOR=coral]background-color:[/color] [COLOR=darkgoldenrod]teal[/color];
[teal]}[/teal]

[/li]
[li]If you want to color cell 5 of the row under mouse pointer only when cell 2 is under the mouse pointer

td[teal]:[/teal]nth[teal]-[/teal]of[teal]-[/teal]type[teal]([/teal]2[teal]):[/teal]hover[teal]+[/teal]td[teal]+[/teal]td[teal]+[/teal]td [teal]{[/teal]
  [COLOR=coral]background-color:[/color] [COLOR=darkgoldenrod]teal[/color];
[teal]}[/teal]

[/li]
[/ul]
There is a live example to try on

http://jsfiddle.net/6fbGE/

.


Feherke.

http://feherke.github.com/

 

[mike2228]

Thanks Vacunita,

It is almost doing what I need. If I use your concept and make 3 different styles

tr:hover td.highlightME{ background-color:red; }
tr:hover td.highlightME2{ background-color:blue; }
tr:hover td.highlightME3{ background-color:yellow; }

And have:
<tr>
<td class="highlightME">team1</td>
<td class="highlightME2">team2</td>
<td class="highlightME3">team3</td>
<td class="highlightME">team1</td>
<td class="highlightME2">team2</td>
<td class="highlightME3">team3</td>
</tr>

It highlights all of the fields with their respective colors. Is it possible to have just team1 cells highlight only when the mouse is over team1, and then if the mouse moves over team2 it will only highlight the team2 cells ?

-Mike

 

[vacunita]

That's a little more complex since we need to discriminate from the other cells, but also select them, when hovered appropriately.

You could use sibling selectors to specify the hovers:

td.highlightMe:hover, td.highlightMe:hover ~ td.highlightMe{
background-color:#002299;
color:#dedede;
}

td.highlightMe1:hover, td.highlightMe1:hover ~ td.highlightMe1{
background-color:#664411;	
	}

The first part before the comma, is simple enough highlight the cell with the class highlightMe1 when hovered over, the second part is the interesting bit. Highlight the cell with the class of highlightMe that follows the cell being hovered and also has a class of highlightMe.
The only issue here, is that the reverse is not true, that is hovering over the following elements will not highlight the previous ones.

Since you mention you can't use any client side scripting, I'm guessing jquery is not a possibility, though it would make this sort of thing much easier.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech