squaredvision Posted October 7, 2009 Report Share Posted October 7, 2009 Here is a link I made to show you what I mean...Its a table that you can hover over, and click on.When you hover over the row the text changes color.http://www.squaredvision.com/test.htmI've been trying to figure this out with no progress.-Best regard,Michael Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2009 Report Share Posted October 7, 2009 this is from a similar posting which uses javascript to highlight the rows<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#MyTable {background-color:#FFFFFF;}</style><script type="text/javascript">function setattributes(){var x = document.getElementById("MyTable");var y = x.getElementsByTagName("tr");var trtotal = y.length;for(i=0;i<trtotal;i++) { if(window.addEventListener) { y.addEventListener('mouseover',trOver,false); y.addEventListener('mouseout',trOut,false); } else if(window.attachEvent) { y.attachEvent('onmouseover',trOver); y.attachEvent('onmouseout',trOut); } else { y.onmouseover = trOver; y.onmouseout = trOut; } }}function checktr(e){var targ;if (e.target) { targ=e.target; }else if (e.srcElement) { targ=e.srcElement; }if (targ.nodeType==3) // defeat Safari bug { targ = targ.parentNode; }return targ;}function trOver(e){var targ=checktr(e);targ.style.backgroundColor="#FF0000";targ.style.color="#ffffff";}function trOut(e){var targ=checktr(e)targ.style.backgroundColor="#ffffff";targ.style.color="#000000";}window.onload=setattributes;</script></head><body><table width="765" border="1" cellspacing="0" cellpadding="0" id="MyTable"> <tr> <td>111111111111111111111111111111111111</td> </tr> <tr> <td>222222222222222222222222222222222222</td> </tr> <tr> <td>333333333333333333333333333333333333</td> </tr> <tr> <td>444444444444444444444444444444444444</td> </tr> <tr> <td>555555555555555555555555555555555555</td> </tr> <tr> <td>666666666666666666666666666666666666</td> </tr> <tr> <td>777777777777777777777777777777777777</td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
jlhaslip Posted October 8, 2009 Report Share Posted October 8, 2009 google tablecloth Link to comment Share on other sites More sharing options...
squaredvision Posted October 8, 2009 Author Report Share Posted October 8, 2009 (edited) hmm, thanks for the tips. it doesn't work with colspan higher than 2, each td gets selected. is there anyway of doing this strictly all CSS? tablecloth is pretty neat but i have to download too files, i already have a few being loaded, i was wondering if i could just add on to my CSS instead of adding too more files. Edited October 8, 2009 by squaredvision Link to comment Share on other sites More sharing options...
squaredvision Posted October 8, 2009 Author Report Share Posted October 8, 2009 Is there a way I can change the text color on HOVER? just purely CSS? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2009 Report Share Posted October 8, 2009 This uses css only, but won't work for IE6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">table {border-collapse:collapse;}table tr {background-color:#00ff00; color:#000000;}/*table tr:hover {background-color: #FF9900; color:#FFFFFF; } highlights row*/table td:hover {background-color: #FF9900; color:#FFFFFF; } /* highlight cells */</style></head><body><table width="968" border="1" cellspacing="0" cellpadding="0"> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td colspan="4">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Â </td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td colspan="4">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
squaredvision Posted October 8, 2009 Author Report Share Posted October 8, 2009 (edited) Awesome that is what I'm talking about.Is there a way to get it to work with this structure? http://www.squaredvision.com/test.htm.myaccountRow tr { color: red; background-color: white;}.myaccountRow tr:hover { background-color: black; cursor: pointer; color: yellow;}============<table border="0" cellpadding="0" cellspacing="0"><tr><td colspan="2" class="header2"><strong>Open Orders</strong></td></tr> <a href="#"><tr class="myaccountRow"> <td>122027</td> <td>2010 MERCEDES-BENZ GLK</td> <td>PHILADELPHIA, PA 19115</td> <td>MAPLE GROVE, MN 55311</td> <td>$868.00</td> <td>10/22/2009 1:16:59 PM</td> </tr></a></table>I dont want all the TR's to be affected just specific ones...Can I use the class and place it in the TR to affect what I want. How do I go about doing that? Edited October 8, 2009 by squaredvision Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2009 Report Share Posted October 8, 2009 (edited) depends if specific affected tr is going to be a constant? not changing all the time.just assign class to tr<tr class="highlightthis">then target that specific classtable tr.highlightthis:hover{yaddah,yaddah}ortable tr.highlightthis td:hover{yaddah,yaddah}one small point using <a href="#"><tr... is not valid and should not be outside of td tag, and is not required for hover effect anyway.if you required to list further details for example create a link in first cell <td><a href="thispage">link</a></td>to this page Edited October 8, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
squaredvision Posted October 8, 2009 Author Report Share Posted October 8, 2009 hmm, i think im one step closer to figuring this out...This is what I have now: http://www.squaredvision.com/test.htmBut only the td is being selected not the whole TR. how do I get the TR(the whole row to select)?table tr.myaccountRow td:hover { background-color: #E0E0E0; cursor: pointer; color: red;}table tr.myaccountRow { color: black; background-color: #F8F8F8;} Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2009 Report Share Posted October 8, 2009 table tr.myaccountRow td:hover highlights specific row cell only when hovered overtable tr.myaccountRow:hover hightlights a specific row when hovered over. Link to comment Share on other sites More sharing options...
squaredvision Posted October 8, 2009 Author Report Share Posted October 8, 2009 i do that and then my "color: red" does not work. the text does not change to red it just highlights the whole row..http://www.squaredvision.com/test.htmtable tr.myaccountRow:hover { background-color: #E0E0E0; cursor: pointer; color: red;}table tr.myaccountRow { color: black; background-color: #F8F8F8;} Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2009 Report Share Posted October 8, 2009 (edited) well it would wont it, move the hover section below normaltable tr.myaccountRow ,table tr.myaccountRow:link, table tr.myaccountRow:visited{color: black;background-color: #F8F8F8;} table tr.myaccountRow:hover {background-color: #E0E0E0;cursor: pointer;color: red;}edit also try above Edited October 8, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
squaredvision Posted October 8, 2009 Author Report Share Posted October 8, 2009 Still the same effect, not changing the text to red on hover... if TR is already specified to change text to red why wont it do it?table tr.myaccountRow { color: black; background-color: #F8F8F8;}table tr.myaccountRow:hover { color: red; background-color: #E0E0E0; cursor: pointer;} Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2009 Report Share Posted October 8, 2009 (edited) OK FORGET THAT!change to table tr.myaccountRow:hover tdedit: the reason the text is not changing is because of.myaccountGrid td{ color: #000; padding: 3px; font-size: 11px; font-family: Tahoma, Geneva, sans-serif;}and class="myaccountRow myaccountGrid"my original code targeted the row only, whereas 'myaccountGrid td' targeted all the cells, and because it is listed last it took precedence over my settings. Edited October 8, 2009 by dsonesuk Link to comment Share on other sites More sharing options...
squaredvision Posted October 8, 2009 Author Report Share Posted October 8, 2009 very nice, it worked! RESOLVED.Can you explain why this works?Is it saying that hover TR(row) and select all TD's in it? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2009 Report Share Posted October 8, 2009 it targets the row and cells within it to overwrite myaccountGrid td (see my previous post edit) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now