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)
[syntax=xhtml]
<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>
[/syntax]
[syntax=css]
tr:hover { background-color:#f5f5f5; }
td .last a { background-color:#000; color:#fff; padding:5px 13px; }
td .last a:hover { background-color:red; }
[/syntax]
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...
Can I do this in CSS?
- Linkjuice57
- Posts: 23
- Joined: Tue Jul 12, 2011 2:44 pm
Can I do this in CSS?
non-existent PHP newb
-
- Posts: 165
- Joined: Fri May 06, 2011 5:02 pm
Re: Can I do this in CSS?
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.
Re: Can I do this in CSS?
You could JavaScipt to change the state, based on a hover over the tr.
Re: Can I do this in CSS?
[syntax=css]td:hover .last a { background-color:#000; color:#fff; padding:5px 13px; }[/syntax]
Will apply the style to the element .last a in the hovered tr. Is that what you want ?
Will apply the style to the element .last a in the hovered tr. Is that what you want ?
- Linkjuice57
- Posts: 23
- Joined: Tue Jul 12, 2011 2:44 pm
Re: Can I do this in CSS?
Ha! That's exactly what I was searching for! Thanks
I got really close myself . Any idea what this 'technique' is called?
I got really close myself . Any idea what this 'technique' is called?
non-existent PHP newb
Re: Can I do this in CSS?
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)
Re: Can I do this in CSS?
ok providing i understand correctly what your after this is what you need..
[syntax=css]
tr:hover { background-color:#f00; }
td.last a { background-color:#000; color:#fff; padding:5px 13px; }
td.last a:hover { background-color:red; }
[/syntax]
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...
[syntax=css]tag#id {
targets a tag WITH an id of what ever.
}[/syntax]
[syntax=css]tag #id {
targets an id WITHIN that tag and not a tag with that id.
}[/syntax]
[syntax=css]tag.class {
targets a tag WITH a class of what ever.
}[/syntax]
[syntax=css]tag .class {
targets an class WITHIN that tag and not a tag with that class.
}[/syntax]
Hope that makes sense
[syntax=css]
tr:hover { background-color:#f00; }
td.last a { background-color:#000; color:#fff; padding:5px 13px; }
td.last a:hover { background-color:red; }
[/syntax]
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...
[syntax=css]tag#id {
targets a tag WITH an id of what ever.
}[/syntax]
[syntax=css]tag #id {
targets an id WITHIN that tag and not a tag with that id.
}[/syntax]
[syntax=css]tag.class {
targets a tag WITH a class of what ever.
}[/syntax]
[syntax=css]tag .class {
targets an class WITHIN that tag and not a tag with that class.
}[/syntax]
Hope that makes sense
Last edited by jacek on Sun Jul 31, 2011 11:17 am, edited 1 time in total.
Reason: code tags...
Reason: code tags...
- Linkjuice57
- Posts: 23
- Joined: Tue Jul 12, 2011 2:44 pm
Re: Can I do this in CSS?
Torniquet wrote:Hope that makes sense
Yes, it does! Thanks for the explanation and help all
non-existent PHP newb