Css Hover Question

kvarnerexpress

Jun 3 2005, 05:43 PM

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.
__________________

badinfluence

Jun 3 2005, 07:44 PM

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..

bjrn

Jun 4 2005, 12:52 PM

QUOTE(kvarnerexpress @ Jun 3 2005, 06:43 PM)

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

CODE

.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

CODE

and then JavaScript:

CODE

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

And then in your stylesheet you add:

CODE

.hover {
styles here
}

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

Okay, I made a testpage:

CODE

<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.

Recent Queries:-

document.getelementbyid, css #hover, classname - 10.80 hr back. (1)
document.getelementbyid, css #hover - 10.92 hr back. (3)
document.getelementbyid, css #, hover - 11.24 hr back. (1)
javascript activate hover - 15.84 hr back. (1)
css td:hover - 16.99 hr back. (1)
css id a td hover - 46.30 hr back. (1)
css table hover - 48.78 hr back. (1)
how we make td hover in css - 68.82 hr back. (1)
css hover table add class javascript - 69.01 hr back. (1)
html table css hover - 87.16 hr back. (1)
javascript table hover - 109.02 hr back. (1)
javascript hover css - 112.09 hr back. (2)
table css multiple td tags - 115.12 hr back. (1)
css mouse hover more td - 116.06 hr back. (2)

Similar Topics

Keywords : css hover

Looking for css, hover

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE