Jump to content
xisto Community
Sign in to follow this  
kvarnerexpress

Css Hover Question

Recommended Posts

if i have multiple td tags in different rows, how can i make the same hover effect apply to all of the td tags that have the same classID? i can get the hover styles to apply individually to each tag, but i need them to occur at the same time. eg. when the mouse is placed over one of the td cells, the hover styles for each cell with the same classID should activate at the same time.__________________

Share this post


Link to post
Share on other sites

if i have multiple td tags in different rows, how can i make the same hover effect apply to all of the td tags that have the same classID? i can get the hover styles to apply individually to each tag, but i need them to occur at the same time. eg. when the mouse is placed over one of the td cells, the hover styles for each cell with the same classID should activate at the same time.

147366[/snapback]

You know, having all td's with the same ID light up when any td is hovered would be easy, that would be

.table:hover #id {styles}
But having it happen only when the td's of a certain ID are hovered over is more difficult... I guess what I would try to do is make a JavaScript hack. Basically you would have to make an onHover event, which changes the class of all td's with the same ID as the one you are hovering over. And then have whatever style you want for that new class you are making.

 

I'm not sure if this would work, but for each td you make

 

<td id="something"  onmouseover="hoveron()" onmouseout="hoveroff()">
and then JavaScript:

function hoveron()  { document.getElementById("something").className=" hover"; }function hoveroff() { document.getElementById("something").className=this.className=""; }

And then in your stylesheet you add:

.hover {styles here}

Note that you have to write .hover, not :hover.

 

 

Okay, I made a testpage:

<html><head><title>test</title><style>table {background-color:red;}td.hover {background-color:green;}</style><script>function hoveron()  { document.getElementById("a").className=" hover"; }function hoveroff() { document.getElementById("a").className=this.className=""; }</script></head><body><table><tr><td>text</td><td id="a" class=" " onmouseover="hoveron()" onmouseout="hoveroff()">text</td></tr><tr><td>text</td><td>text</td><td id="a" class=" " onmouseover="hoveron()" onmouseout="hoveroff()">text</td></tr></table></body></html>
it doesn't really work, I guess I would have to loop through all elements with the "a" ID. But i hope I kind of got across what you would have to do.

 

 

There migth be some pure CSS solution, but i don't know about it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.