Get button hover behaviour work in IE
June 2, 2008 Firefox, IE, Opera, Safari No CommentsI have been trying to fix the consistency problem found in IE and Firefox. Same as Opera and Safari, Firefox is able to accept button hover behavior and work perfectly fine. However, this button:hover is not working in IE 6 and IE 7, in fact in both IE button:hover behavior not existed at all.
Yeah, another alternative is I can use image hover bla bla bla, but that’s not the case. It’s just feel not satisfied to know this button:hover not working in IE.
Being honest, I did not invent the code myself to fix this issue. Thanks to Pseudo-Classes Fix for Internet Explorer!!! By implementing some jScript code in htc file, and includes this htc file in the css, the hover behavior for any html elements including button work in IE.
Test Result:
| Button hover: | ||||||
| Manage | Publish | Advanced | ||||
| Span hover: | |
| Hide comments |
The code is:
IEFixes.htc
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="RestoreActive()" />
<SCRIPT LANGUAGE="JScript">
function DoHover()
{ element.className += ' hover';
}
function DoActive()
{ element.className += ' active';
}
function RestoreHover()
{ element.className = element.className.replace(/\bhover\b/,'');
}
function RestoreActive()
{ element.className = element.className.replace(/\bactive\b/,'');
}
</SCRIPT>
My test code is: (Note: put the .htc file in the same directory)
<html>
<head><title></title>
<style>
button, span.tab-inactive, .tab-whitespace span.command {
behavior: url('IEFixes.htc');
}
.tab {
display: block;
cursor: auto;
padding: 2px;
width: 6em;
font-size: 2em;
}
.tab-spacer{
display: block;
cursor: auto;
padding-bottom: 3px;
}
span.tab-inactive {
padding-top: 4px;
padding-bottom: 4px;
background-color: #d9d9d9;
color: #0d2474;
background: none;
background-color: none;
text-align: center;
font-size: 2em;
cursor: pointer;
}
span.tab-inactive:hover, span.tab-inactive.hover {
font-weight: normal;
padding-top: 4px;
padding-bottom: 4px;
color: #0d2474;
background: none;
background-color: #c0d0ff;
text-align: center;
font-size: 2em;
cursor: pointer;
}
.tab-whitespace span.command:hover, .tab-whitespace span.command.hover {
text-decoration: underline;
background-color: transparent;
cursor: pointer;
}
</style>
</head>
<body>
<div class="tabs">
<table border="0" cellpadding="2" cellspacing="2" id="new">
<tr>
<td>Button hover:</td>
<td colspan="6"></td>
</tr>
<tr>
<td class="tab-spacer"></td>
<td>
<span title="Manage content files" class="tab-inactive" id="tab-manage">Manage</span>
</td>
<td class="tab-spacer"></td>
<td>
<span title="Publish the content" class="tab-inactive" id="tab-publish">Publish</span>
</td>
<td class="tab-spacer"></td>
<td>
<span title="Advanced options" class="tab-inactive" id="tab-advanced">Advanced</span>
</td>
</tr>
<tr>
<td colspan="6" class="tab-spacer"></td>
</tr>
</table>
<p/><p/>
<table border="0" cellpadding="0" cellspacing="0" id="new1">
<tr>
<td>Span hover:</td>
<td></td>
</tr>
<tr>
<td></td>
<td class="tab-whitespace">
<span style="color:#000080;" class="command">Hide comments</span>
</td>
</tr>
</table>
</div>
</body>
</html>
