linking a table row and mouseovers

[wizpl]

I want to have a link active on the whole table row area. On mouse over a row I want a style in right cell text to change.

so, let's say it looks like:

clip1 title [mp3]
clip2 title [mp3]

when mouse over "clip title", [mp3] changes its style.
Is it possible?

<table>
<tr>
 <td>
   clip1 title
 </td>
 <td>
  <a href="vlip1.mp3" class="button_sm">mp3</a>
 </td>
</tr>
<tr>
 <td>
   clip2 title
 </td>
 <td>
  <a href="vlip2.mp3" class="button_sm">mp3</a>
 </td>
</tr>
</table>

the css for .button_sm class is:

A.button_sm:link, A.button_sm:visited
{
font-size:10px;
line-height: 12pt;
BACKGROUND-COLOR: #999999;
width: 30px;
COLOR: #f8f8f8;
FONT-WEIGHT: bold;
height:14px;
text-align: center;
text-decoration: none;
cursor: hand;
border: 0px none #999999;
}
A.button_sm:hover, A.button_sm:active 
{
font-size:10px;
line-height: 12pt;
BACKGROUND-COLOR: #FA8406;
width: 30px;
COLOR: #f8f8f8;
FONT-WEIGHT: bold;
height:14px;
text-align: center;
text-decoration: none;
cursor: hand;
border: 0px none #999999;
}

[createErrorMsg]

With the HTML source code you are using, you would need JavaScript, or some other client-side scripting language, to do this. CSS :hovers can only effect the element they are applied to or elements nested within the element the :hover is applied to.

cEM

[SuzyUK]

Adjacent Sibling selectors [w3.org] would do it, but not until IE plays nice..

scripting or a behaviour file would do it as cEM says unless you would like to change the source code?

In which case you can do it with only CSS.

You can't have a link span multiple table cells but you can have a link span multiple <span> (inline elements). You can then style the multiple inline elements to fit your design and still keep the source code legible

Suzy

[wizpl]

thanks for a tip about <span> inline tags. That is usefull.

The other problem that popped up is that this style looks slightly different in firefox then IE. The background highlight hight is taller in IE.

And I hoped that IE would show a nice transition on rollover, but it doesn't :(

.button
{
font-size: 11px;
BACKGROUND-COLOR: #FA8406;
width: 48px;
COLOR: #f8f8f8;
FONT-WEIGHT: bold;
height:18px;
border: 0px none #999999;
filter: BlendTrans(Duration=1);
}