Welcome to WebmasterWorld Guest from 54.167.0.111

Forum Moderators: not2easy

Message Too Old, No Replies

TD Rollover with CSS

     

NeedScripts

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

Nick

NeedScripts

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



Nope it is not working :(

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

victor

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member




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

any help?

NeedScripts

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

WebmasterWorld Senior Member 10+ Year Member



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

edit_g

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

WebmasterWorld Senior Member 10+ Year Member



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

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

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

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month