homepage Welcome to WebmasterWorld Guest from 54.167.174.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Table Row Highlight on hover
How to do it?
fischermx

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 9286 posted 10:50 pm on Jun 21, 2006 (gmt 0)

I have a table in my website and I want to have that nice pale yellow highlight when I hover the rows, just like the adwords campaigns reports do it.
I'm on the google css file trying to figure it out, but I've found nothing so far.

 

Setek

5+ Year Member



 
Msg#: 9286 posted 1:33 am on Jun 22, 2006 (gmt 0)

With :hover support (from the standards-compliant browsers) it's possible in pure CSS:

table tbody tr:hover { background: #aaa; }

But, as usual, if you want IE to play nice, I believe you have to use javascript - onmouseover :)

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 9286 posted 1:04 pm on Jun 22, 2006 (gmt 0)

This isn't the nicest code (I was still learning loads when I wrote it) but it does the job:

Javascript:
var rows = document.getElementByTagName('tr');
for (i=0;i<rows.length;i++) {
rows[i].onmouseover = highlight;
rows[i].onmouseout = dehighlight;
}
function highlight() { this.className = "highlight"; }
function dehighlight() { this.className = ""; }

CSS:
tr:hover, tr.highlight { background-color: #aaa; }

fischermx

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 9286 posted 6:08 pm on Jun 22, 2006 (gmt 0)

Robin:

That seems to work in Opera and Firefox, but doesn't work in IE!
Is that correct?

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 9286 posted 10:04 pm on Jun 22, 2006 (gmt 0)

Well, the Javascript is there for IE :) I suspect my code is being called out of context. Seeing as it's only there for IE we can use it's non-standard method of attaching events. So:

function setupHighlight() {
var rows = document.getElementByTagName('tr');
for (i=0;i<rows.length;i++) {
rows[i].onmouseover = highlight;
rows[i].onmouseout = dehighlight;
}
}
function highlight() { this.className = "highlight"; }
function dehighlight() { this.className = ""; }
body.addEvent("onload", setupHighlight);

That's untested (on a mac and don't have access to IE) but it should work. All I've done is assign my 'setup' code to a function (setupHighlight) and told IE to run it when the body's finished loading.

BTW, I'm sure someone might be able to rewrite this better if you ask in the JS forum. Oh, and obviously you'll still need the CSS code as well.

fischermx

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 9286 posted 10:18 pm on Jun 22, 2006 (gmt 0)

I still getting the error on IE : "Object does not support this property or method".

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 9286 posted 10:56 pm on Jun 22, 2006 (gmt 0)

Sorry, as I can't test this here I'm clutching at straws. Try adjusting the last line to read:

body.onload = setupHighlight;

wickydoodah

10+ Year Member



 
Msg#: 9286 posted 12:44 pm on Jun 23, 2006 (gmt 0)

Try this:

<tr onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';">

Add the above to every <tr> tag that should highlight when rolling over it with your mouse.

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