 |
 |
|
|
|
|
Internet Explorer Hover issue on TD, TR and other Elements2008-01-22 Upon the design of our web site we came across a problem where we wanted a hover effect on table cells and other elements. While this works perfectly under FireFox, unfortunately Internet Explorer lets us down once again! After a bit of research we came across a solution to our problem, however this solution didnt function properly. The first solution we came up with used the Internet Explorer exclusive "expression" functionality to change the elements styles on the fly. Let's take a look at it in any case just to see what not to do: .link_cell The above functionality actually works in Internet Explorer and changes the background colour of a table cell - td - (for example). The problem comes in when you have a different class within a "link_cell". In our case, we had anchor tag's within our "link_cell" table cells and they had their own classes defined. FireFox maintained perfect functionality but the problem that was caused in Internet Explorer was that whenever a mouse over event was caused on the cell - it would change the background colour as instructed, but when you triggered the mouse over event on the anchor tag that was in a 'link_cell - it would flicker the background of the link cell before setting it correctly.{ padding:5px; h: expression( onmouseover=new Function("this.style.cursor='pointer'; this.style.backgroundColor='#3f3f3f';"), onmouseout=new Function("this.style.backgroundColor=''; this.style.cursor='default';")); } .link_cell:hover { cursor:pointer; background-color:#3f3f3f; } While this was a minor glitch and bareable to some, we as perfectionists couldn't let this slip! We went back to the 'drawing boards' so to speak and found this solution to the problem: .link_cell { padding:5px; background-color: expression( this.onmouseover = new Function("this.className += ' link_cell_hover';"), this.onmouseout = new Function("this.className = this.className.replace('link_cell_hover', '');") ); } .link_cell:hover, .link_cell_hover { cursor:pointer; background-color:#3f3f3f; } This minor change, instead of changing the applicable style and rather changing the elements class - fixed the problem. You will also notice that we didnt replace the class but added the class using the += operand in case any other classes were already applied to the element. Similarly on the mouse out event, we find the class we added and replace it with nothing so it only leaves any other classes that were previously applied. You will also notice that we added a seperate class 'link_cell_hover' which is the same as the pseudo class 'link_cell:hover'. We hope this helps you in your conquest to beat the incompatibilities of Internet Explorer!  View other articles in the Web Design category.View other articles in the CSS sub-category. |
Privacy Policy | Terms & Conditions | Terms Of Service | Sitemap