BetterPHP

Hi, I've got an idea for a table hover but I'm not sure if its possible with CSS/HTML only. It's rather hard to example so I'll just give an example of how my page looks like. This is not my actual code, just a quick sketch...

(Imagine it all filled)

<table>
<tr>
<td>This</td>
<td>Is </td>
<td>a</td>
<td>table</td>
<td>demo</td>
</tr>

<tr>
<td>just</td>
<td>another</td>
<td>row</td>
<td class="last"><a href="#">I'm a CSS styled button!</a></td>
</tr>
</table>

tr:hover { background-color:#f5f5f5; }
td .last a { background-color:#000; color:#fff; padding:5px 13px; }
td .last a:hover { background-color:red; }

So what I want to do: When I hover the TR I want the background-color of ".last a" to change also. Like a "double hover"?

Hope I make any sense...

I know what you mean and I don't know if it can be done. The tr's in tables have limited styling capabilities. You're best bet would be just to try it and find out. If it doesn't work then you have your answer.

You could JavaScipt to change the state, based on a hover over the tr.

td:hover .last a { background-color:#000; color:#fff; padding:5px 13px; }

Will apply the style to the element .last a in the hovered tr. Is that what you want ?

Ha! That's exactly what I was searching for! Thanks

I got really close myself . Any idea what this 'technique' is called?

Linkjuice57 wrote:I got really close myself . Any idea what this 'technique' is called?

I don't think it really has a name, the :hover thing is called a pseudo-class (I think)

I think this is better:

td .last a:hover

ok providing i understand correctly what your after this is what you need..

tr:hover { background-color:#f00; }
td.last a { background-color:#000; color:#fff; padding:5px 13px; }
td.last a:hover { background-color:red; }

Notice there is no space between td and .last

having no space between the tag and the class identifier is styling the td tag with a class name of last.

having a space between the 2 (like in your original) is telling the style to apply to a class located INSIDE a td tag, NOT a td tag with that class name.

for future reference...

the same applies for IDs as it does classes...

tag#id {
   targets a tag WITH an id of what ever.
}

tag #id {
   targets an id WITHIN that tag and not a tag with that id.
}

tag.class {
   targets a tag WITH a class of what ever.
}

tag .class {
   targets an class WITHIN that tag and not a tag with that class.
}

Hope that makes sense

Torniquet wrote:Hope that makes sense

Yes, it does! Thanks for the explanation and help all