Plain text hover colour

[Nreva10]

Hi guys!I'm not quite sure where to post this topic because it involves HTML and CSS, so I decided to put it in this forum. Nevertheless that's not the point.I'm having trouble with a forum template. I wish to change the color of the text when I put my mouse over a section. I have managed to change the background and the links colour but, however, I cannot do so with plain text, this is, non-linked.You can see my problem here: IIND.sanmaikols.net The description of each forum should change from black to another colour when the mouse is on the red area, not only just over the text.The code is the following:

<tr align="left" valign="top" class="pn-default" style="background-color:#EBEBEB;" onmouseover="this.style.background='#762929'; this.className='pn-plain';" onmouseout="this.style.background='#EBEBEB'; this.className='pn-default'">		<td headers="col_0" align="center" valign="middle" style="width:2%;">			<!--[ if $forum.new_posts eq 1 ]-->					<!--[ pnimg src='red_folder.gif' alt='_PNFORUM_NEWPOSTS' altml=true ]-->				<!--[ else ]-->					<!--[ pnimg src='folder.gif' alt='_PNFORUM_NONEWPOSTS' altml=true ]-->				<!--[ /if ]-->			</td>			<td headers="col_0">				<a title="<!--[ pnml name='_PNFORUM_GOTO_FORUM' ]--> '<!--[ $forum.forum_name ]-->'" href="<!--[ pnmodurl modname=pnForum type=user func=viewforum forum=$forum.forum_id ]-->"><strong><!--[ $forum.forum_name ]--></strong></a> <!--[ adminlink type=forum id=$forum.forum_id ]-->		<br /><!--[ $forum.forum_desc ]-->				<br /><!--[ pnml name='_PNFORUM_MODERATEDBY' ]-->: <!--[ listforummods moderators=$forum.forum_mods ]-->			</td>			<td headers="col_1" style="width:5%;text-align:center;" align="center" valign="middle"><!--[ $forum.forum_topics ]--></td>			<td headers="col_2" style="width:5%;text-align:center;" align="center" valign="middle"><!--[ $forum.forum_posts ]--></td>			<td headers="col_3" style="width:15%;text-align:center;" align="center" valign="middle"><!--[ if $forum.last_post_data.name <> '' ]--><!--[ $forum.last_post_data.unixtime|pndate_format:datetimebrief ]--><br /> <!--[ pnml name='_BY' ]--> <!--[ $forum.last_post_data.name|profilelink ]--><br /><a href="<!--[ $forum.last_post_data.url_anchor|pnvarprepfordisplay ]-->" title="<!--[ pnml name='_PNFORUM_GOTO_LATEST' ]--> '<!--[ $forum.last_post_data.subject|pnvarprephtmldisplay ]-->'"><!--[ pnimg src=icon_latest_topic.gif ]--></a><!--[ else ]--><!--[ pnml name='_PNFORUM_NOPOSTS' ]--><!--[ /if ]--></td>		</tr>

Thank you very much for your help!

[holmedwa04]

Right the way I understand it is that you would like normal text to change colour when you hover over it?So just add this code to your site:

<style>a.2:link { color:#??????; }</style>

Then text that you want to change that colour will if you put them in this code:

<a class="2" href="mypage.html">Your text</a>

Just make sure that the text links to the same page, and then the words will change colour when you hover over them, but if someone clicks them it will just reload the page.

[Nreva10]

Thanks. I had already done that another way and it also worked. The problem is that I would like to get rid of the bold text type.And just in case, is there any way to do this without putting a link to the same page? That would be great.

[holmedwa04]

Erm, im really not sure, and yes, to be honest my way is very crude, I know eve myself. But why do you want normal text to change colour when you hover over it anyway?

[aspnetguy]

use javascript (IE only recognizes :hover on links)

<span onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">text to change</span>

[Nreva10]

That's much better but still not the bull's eye. The idea to change the color is because black cannot be easily read in a red background. Consequently, I wish to change the color not when the mouse is on the text but on the row.You can see the improvements in the link above.Thanks again!

[holmedwa04]

The trouble is that it does not open for me?

[Nreva10]

I have managed to reduce the problem to this:

<tr align="left" valign="top" style="background-color:#EBEBEB;" onmouseover="this.style.background='#762929'; this.style.color='#FEB300'; this.className='pn-plain';" onmouseout="this.style.background='#EBEBEB'; this.style.color='black'; this.className='pn-default'">

What's wrong with this code? The only attribute that does not work is the this.class.color. Why??If I put the tag in the <td> it works but only in the cell not in the whole row.

[justsomeguy]

This is just a guess, but it might be because you set the class after the style. If the class includes a color also, then setting the class after you set the color would change the color to whatever it is in the class.

[Nreva10]

I have changed the order and, unfortunately, there is no difference. Thanks for the guess anyway.

[justsomeguy]

Does the background color change?

[Nreva10]

Yes it does. Both the background and the style work perfectly.I have been doing a bit of research and I have found out that instead of headers you can use scope. Could that be of any help? It's because I find it pretty strange that the statement works everywhere but where it should.If you need a version of the code you can find it in the first message of this post. However I can upload a more actual one (I've done just a few changes).

[justsomeguy]

Actually, check that the tr does in fact use the color attribute. Background color makes sense for a table row, but a table row itself doesn't contain any text, so color might not necessarily apply to it. But you would still think it would pass the color on to its children. Try just applying a color directly to the tr and see if it even uses it:<tr align="left" valign="top" style="color: #00FF00; background-color:#EBEBEB;" onmouseover=...

[Nreva10]

No change at all. It seems as it does not recognise the statement. Maybe the solution would be changing the CSS style sheet? I say that because the className works.

[justsomeguy]

If you can put a color in the class name and have that work, then do that. But you may not be able to apply a color to a tr.