Welcome to WebmasterWorld Guest from 54.205.126.164

Forum Moderators: not2easy

Message Too Old, No Replies

TD Rollover with CSS

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts:720
votes: 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

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

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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

Nick

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts:720
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts:720
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 4, 2002
posts:1314
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts:720
votes: 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)

New User

10+ Year Member

joined:Feb 4, 2003
posts:5
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 4, 2002
posts:720
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 3, 2002
posts:1590
votes: 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...)

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

Senior Member

joined:Jan 27, 2003
posts:2534
votes: 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)

Full Member

10+ Year Member

joined:Oct 18, 2000
posts:256
votes: 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.
9:17 am on Feb 11, 2003 (gmt 0)

Senior Member

joined:Jan 27, 2003
posts:2534
votes: 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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members