IE doesn't have a complete CSS event model. It has its 'own' event model which is different than XHTML DOM's. Microsoft....
Anyway what you have to do is create a 'behaviour' that allows you to click on any element in the tree and it will then accept the mouse clicks. Until then it will not work.
Here is the code:
<attach event='ondocumentready' handler='parseStylesheets' />
<script language='JScript'>
/**
* HOVER - V1.11.040203 - whatever:hover in IE
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2004 - Peter Nederlof
*
* Credits - Arnoud Berendsen
* for finding some really -sick- bugs
*
* howto: body { behavior:url('csshover.htc'); }
* ---------------------------------------------
*/
var currentSheet, doc = window.document;
function parseStylesheets() {
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
var l, rules, imports;
if(sheet.imports) {
imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++)
parseStylesheet(sheet.imports[i]);
}
rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):hover/i).test(select)) return;
var newSelect = select.replace(/(\.([a-z0-9_-]+):hover)|(:hover)/g, '.$2onHover');
var hasClass = (/(\.([a-z0-9_-]+):hover)/g).exec(select);
var className = (hasClass? hasClass:'') + 'onHover';
var affected = select.replace(/:hover.*$/g, '');
var elements = getElementsBySelect(affected);
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className);
}
function HoverElement(node, className) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
node.attachEvent('onmouseover',
function() { node.className += ' ' + className; });
node.attachEvent('onmouseout',
function() { node.className =
node.className.replace((new RegExp('\\s+'+className)),''); });
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
var tagName = (/^[a-z0-9]+/i).exec(select.toUpperCase()) || '*';
for(var i=0; i<elements.length; i++) {
result = elements[i].getElementsByTagName(tagName);
for(var j=0; j<result.length; j++) {
node = result[j];
if((identify && node.id != identify) || (classname && !(new RegExp('\\b' +
classname + '\\b').exec(node.className)))) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>
In your css file you put:
body {
behavior: url(javascript/csshover.htc);
}
- Bill