...

View Full Version : Onmouseover table cell changes link color



arnyinc
01-06-2003, 04:15 PM
Hello,

I'm having trouble figuring out the hierarchy in order to change the color or background color of a link.

<tr><td onmouseover="I_cannot_figure_out_what_goes_here.clsMenuItemIE.style.backgroundColor='red'"><a href="test.htm" class="clsMenuItemIE">link text</a></td></tr>

To compound the problem, I am already setting the style in a style sheet and I don't know which takes precedence.

<head>
<style>
all.clsMenuItemNS, .clsMenuItemIE {text-decoration: none; color: black;}
</style>
</head>

Thanks for any help

Bosko
01-06-2003, 04:20 PM
td:hover{background-color:red}

applesauce
01-06-2003, 05:41 PM
from http://www.w3schools.com/css/css_intro.asp



Cascading Order
What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority:

1. Browser default
2. External Style Sheet
3. Internal Style Sheet (inside the <head> tag)
4. Inline Style (inside HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).

arnyinc
01-06-2003, 06:19 PM
applesauce, thank you for straightening me out with the priorities.

Bosko, I was unable to get hover working with a table cell. I can get it to work for a link (a:hover) but not with td:hover. Do you have any advice or does it look like I'm doing it wrong?

<html>
<head>
<style>
td:hover {background-color:red}
</style>
</head>
<body>
<table>
<tr>
<td>Item 1</td>
</tr>
</table>
</body>
</html>

I'm only concerned with IE5, but it didn't work in IE5 or NS4.76

Thank you!

cg9com
01-06-2003, 06:24 PM
shouldnt use hover psuedos on anything but anchors just yet. (and even then its better to use mouseovers)

onmouseover="this.className='classname';"

onmouseout="this.className='classname';"

arnyinc
01-06-2003, 06:34 PM
EDIT: nevermind I figured it out, THANK YOU!

If anyone cares, I was using class instead of ID and class didn't work.

<html>
<body>
<table>
<tr>
<td onMouseOver="buh.style.backgroundColor='red'">Item 1</td>
</tr>
</table>
<a href="#" id="buh">buh</a>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum