Hey,

 

When hovering over a <tr> element in a table I'd like to apply styles to the next <tr> element in the table?

 

<table>
   <tr class="hoverTr">
       <td>Col1</td>
       <td>Col2</td>
       <td>Col3</td>
   </tr>
   <tr>
       <td colspan="3">change styles of this row</td>
   </tr>
   <tr class="hoverTr">
       <td>Col1</td>
       <td>Col2</td>
       <td>Col3</td>
   </tr>
   <tr>
       <td colspan="3">change styles of this row</td>
   </tr>

</table

 

so whenever a table row of class="hoverTr" is hovered over by the mouse I'd like to change the styles of the next row.

 

How do I do this? Can it be done with pure CSS? Is there a pseudo selector for this?

 

Thanks,

I believe you'd be looking for:

 

tr:hover + tr 

 

That's the correct syntax, anyway. Not sure about browser support, you'll have to bung together a test case.

Edited July 4, 201115 yr by Renaissance-Design

Thanks Renaissance,

 

This works perfectly! My actual CSS makes it a little more complex. Firstly I'm selecting on a class not all tr elements, 2 I didn't say before but I'm actually then applying styles to a div inside the td of the next tr. So my CSS looks like this..

 

.myClass:hover + tr td div

 

And it works. I have tested in IE FF Chrome Safari and Oprea and it is working perfectly in all five!

 

Many Thanks!