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] Quote Link to comment 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] Quote Link to comment 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.