homepage Welcome to WebmasterWorld Guest from 54.234.2.88
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Table Row Highlight on hover
How to do it?
fischermx




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




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




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




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




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




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




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




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