homepage Welcome to WebmasterWorld Guest from 54.197.130.16
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
NeedScripts




msg:1176103
 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 :)

Thanks

 

Nick_W




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

Discussion from earlier today ;)
[webmasterworld.com...]

Nick

NeedScripts




msg:1176105
 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.

NeedScripts




msg:1176106
 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).

victor




msg:1176107
 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.

NeedScripts




msg:1176108
 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. :)

synkronus




msg:1176109
 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?

NeedScripts




msg:1176110
 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?

edit_g




msg:1176111
 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">
<tr>
<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%">
<tr>
<td height="203" valign="top">
<div align="center"><br>
hello</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

(sorry about the formating...)

Receptional Andy




msg:1176112
 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.

gmiller




msg:1176113
 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




msg:1176114
 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