xyn Posted September 30, 2006 Share Posted September 30, 2006 Hey guys.A while ago i done something in CSS so when the MOUSE hoversover a table, the background colour changes, but i've forgottenSo i tried again and it kind of workedthen when the mosue hovers the link. the actual "TEXT" changes :/So i tried changing the link to the whole table ROW and that dont work either :/any ideas?[sub]<style>.nav, tr td a:link {font-family: Arial, verdana, Tahoma; background:url('http:///default/link.PNG');}.nav, tr td a:visited {font-family: Arial, verdana, Tahoma; background:url('http:///default/link.PNG');}.nav, tr td a:hover {font-family: Arial, verdana, Tahoma; background:url('http:///hover.PNG');}.nav, tr td a:active {font-family: Arial, verdana, Tahoma; background:url('http:///link.PNG');}</style></head><body><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="156" height="19"> <tr> <td width="100%" class=nav><p align="center" ><a href="#t">test</a></td> </tr>[/sub] Link to comment https://forums.phpfreaks.com/topic/22588-table-hovers-background-colours/ Share on other sites More sharing options...
obsidian Posted September 30, 2006 Share Posted September 30, 2006 right, the :hover pseudo class only works cross-browser on anchor tags. if you're actually wanting table, row or even cell background-color to change, you'll need to do that via javascript. however, you can do this by dynamically changing the class:[code]<style type="text/css">tr.normal { background-color: #ffffff;}tr.hover { background-color: #FCFDE3;}</style>< script type="text/javascript">function hoverMe(ele) { if (ele.className == 'normal') { ele.className = 'hover'; } else { ele.className = 'normal'; }}</ script><table><tr class="normal" onmouseover="hoverMe(this);" onmouseout="hoverMe(this);"><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr><tr class="normal" onmouseover="hoverMe(this);" onmouseout="hoverMe(this);"><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr><tr class="normal" onmouseover="hoverMe(this);" onmouseout="hoverMe(this);"><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr><tr class="normal" onmouseover="hoverMe(this);" onmouseout="hoverMe(this);"><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td></tr></table>[/code] Link to comment https://forums.phpfreaks.com/topic/22588-table-hovers-background-colours/#findComment-101409 Share on other sites More sharing options...
ToonMariner Posted October 2, 2006 Share Posted October 2, 2006 I believe there is a plugin for IE that allows you use :hover on any element in css - but it is a plugin and not many people will have it so stick to obsids suggestion - making sure that the users don't suffer any if js is switched off. Link to comment https://forums.phpfreaks.com/topic/22588-table-hovers-background-colours/#findComment-102185 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.