homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

TD Rollover with CSS

 6:42 pm on Jan 27, 2003 (gmt 0)

I am thinking of using something like
onmouseover="this.style.background='#800000'" onmouseout="this.style.background='#red'"

but would hate to put on every td, and was wondering if this would be possible using CSS?

Any help would be great :)




 6:46 pm on Jan 27, 2003 (gmt 0)

Discussion from earlier today ;)



 6:47 pm on Jan 27, 2003 (gmt 0)

td a {display: block; margin 0;}
td a:link {color: red;}
td a:hover {color: green;}

is for the link. I am wanting it without links.... but let me try out that code to see if it works without link :)

will post ASAP what I found.


 6:49 pm on Jan 27, 2003 (gmt 0)

Nope it is not working :(

I am wanting to have different background color for the rollover in TD (not the link color).


 6:56 pm on Jan 27, 2003 (gmt 0)

Though hover will theoreticaly work for any element, you'll be hard pushed to find a browser that honors it for anything other than links.


 7:04 pm on Jan 27, 2003 (gmt 0)

Hi victor,

Currently we are using such [onmouseover="this.style.background='#800000'" onmouseout="this.style.background='#red'" ] code on few sites and it seems to be working on IE 4.0, Opera and even Netscape. :)


 1:58 pm on Feb 10, 2003 (gmt 0)

td a { display: block; margin 0; }
td a:link { background-color: red; }
td a:hover { background-color: green; }

any help?


 2:53 pm on Feb 10, 2003 (gmt 0)

I was thinking if there was any way of doing this if there were no links within td?


 3:18 pm on Feb 10, 2003 (gmt 0)

How about this:

<table border="0" cellpadding="0" cellspacing="1" width="100%" bgcolor="#99ccff" height="350">
<td height="300"> <table border="0" cellpadding="10" cellspacing="0" width="100%" bgcolor="white" height="350">
<tr onMouseOver="this.style.backgroundColor='#eff7ff'; status='hello';" onMouseOut="this.style.backgroundColor='#FFFFFF'; status='';" onClick="location.href='http://blah';" style="cursor:pointer;">
<td> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<td height="203" valign="top">
<div align="center"><br>

(sorry about the formating...)

Receptional Andy

 3:58 pm on Feb 10, 2003 (gmt 0)

I understand your problem, but in the end I decided that I was better off adding the code to every cell rather than risking compatibility problems messing around with little-used style code.


 1:18 am on Feb 11, 2003 (gmt 0)

Hovers should work on any element with Mozilla-based browsers. IE only supports them on links, and NN4.x doesn't support them at all. I don't remember how much support Opera has for hover.

Receptional Andy

 9:17 am on Feb 11, 2003 (gmt 0)

You can do td mouseovers with IE5+ - i'm looking at some now. They also work on the latest Opera, Netscape (and Mozilla) browsers.

>I was thinking if there was any way of doing this if there were no links within td?

The style code above works for cells without links, i'm using it for this too.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved