kvarnerexpress 0 Report post Posted June 3, 2005 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
badinfluence 0 Report post Posted June 3, 2005 using td tags...i hope the listing tags are a bit easy to me.. try here. may be you can find some idea.. it showed that we can have same effect..i'm not clear about your last question.. Share this post Link to post Share on other sites
bjrn 0 Report post Posted June 4, 2005 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
