CSS实现onMouseOver、onMouseOut效果和层套菜单_html/css_WEB-ITnose

在IE中 标签的。而实际上 WEB 标准里面， 应该对所有元素都支持。
如果使用 Mozilla 或者 Opera, 那么可以看到不需要这个 htc 都可以正常运行的。 因为 htc 是 IE 特有的，别的浏览器不能理解，会忽略掉，不影响结果的显示。

以下这段 htc 是一个老外写的针对 IE 的 hover 行为的一个修正。
有了这个代码就方便多了，而且最可贵的是，以上的这个页面例子是可以兼容 IE, Mozilla 和 Opera 的。

原先在html里都是使用onMouserOver等事件，实现鼠标焦点控制的，从来没有想到过用CSS简化原先繁琐的工作，直到偶然间发现了whatever:hover，才认识到CSS原来可以做很多工作，甚至可是实现繁杂的menubar。

实现的核心部分是csshover.htc文件，它其实就是JScript代码，负责处理所有的CSS格式，根据定制的CSS格式，生成onMouseOver和onMouseOut事件，实现了hover的组件化。使用时只需制定div:hover{ background:#f8f8f8; }，就实现了鼠标移动到div图层上时，改变背景色的事件。

csshover.htc

<script><br />/**<br />* Pseudos - V1.30.050121 - hover & active<br />* ---------------------------------------------<br />* Peterned - http://www.xs4all.nl/~peterned/<br />* (c) 2005 - Peter Nederlof<br />*<br />* Credits - Arnoud Berendsen<br />* - Martin Reurings<br />* - Robert Hanson<br />*<br />* howt body { behavior:url("csshover.htc"); }<br />* ---------------------------------------------<br />*/<br /><br />var currentSheet, doc = window.document, activators = {<br />onhover:{on:'onmouseover', off:'onmouseout'},<br />onactive:{on:'onmousedown', off:'onmouseup'}<br />}<br /><br />function parseStylesheets() {<br />var sheets = doc.styleSheets, l = sheets.length;<br />for(var i=0; i<l; i++)<br /> parseStylesheet(sheets[i]);<br />}<br />function parseStylesheet(sheet) {<br /> if(sheet.imports) {<br /> try {<br /> var imports = sheet.imports, l = imports.length;<br /> for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);<br /> } catch(securityException){}<br /> }<br /><br /> try {<br /> var rules = (currentSheet = sheet).rules, l = rules.length;<br /> for(var j=0; j<l; j++) parseCSSRule(rules[j]);<br /> } catch(securityException){}<br />}<br /><br />function parseCSSRule(rule) {<br /> var select = rule.selectorText, style = rule.style.cssText;<br /> if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;<br /> <br /> var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');<br /> var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);<br /> var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];<br /> var affected = select.replace(/:hover.*$/, '');<br /> var elements = getElementsBySelect(affected);<br /><br /> currentSheet.addRule(newSelect, style);<br /> for(var i=0; i<elements.length; i++)<br /> new HoverElement(elements[i], className, activators[pseudo]);<br />}<br /><br />function HoverElement(node, className, events) {<br />if(!node.hovers) node.hovers = {};<br />if(node.hovers[className]) return;<br />node.hovers[className] = true;<br />node.attachEvent(events.on,<br /> function() { node.className += ' ' + className; });<br />node.attachEvent(events.off,<br /> function() { node.className =<br /> node.className.replace(new RegExp('\\s+'+className, 'g'),''); });<br />}<br /><br />function getElementsBySelect(rule) {<br />var parts, nodes = [doc];<br />parts = rule.split(' ');<br />for(var i=0; i<parts.length; i++) {<br /> nodes = getSelectedNodes(parts[i], nodes);<br />} return nodes;<br />}<br />function getSelectedNodes(select, elements) {<br /> var result, node, nodes = [];<br /> var classname = (/\.([a-z0-9_-]+)/i).exec(select);<br /> var identify = (/\#([a-z0-9_-]+)/i).exec(select);<br /> var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');<br /> for(var i=0; i<elements.length; i++) {<br /> result = tagName? elements[i].all.tags(tagName):elements[i].all;<br /> for(var j=0; j<result.length; j++) {<br /> node = result[j];<br /> if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +<br /> classname[1] + '\\b').exec(node.className)))) continue;<br /> nodes[nodes.length] = node;<br /> }<br /> } return nodes;<br />}<br /></script>

Test.htm

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

haha

5456456

表格1：

OK	yes	no
haha	fsdfsdf	测试
木野狐	html/css	javascript

表格2：

OK	yes	no
haha	fsdfsdf	测试
木野狐	html/css	javascript

menubar.htm 

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 
•  lorem 

 
• 
    adipiscing 
   
  
   
  •  dolor 
  
   
  • 
      consectetuer
     
    
     
    •  elit 
    
     
    •  ipsum 
    
     
    •  Donec 
    
     
    
     
  
   
  •  vestibulum 
  
   
  
   

 
• 
    consectetuer
   
  
   
  •  elit 
  
   
  •  ipsum 
  
   
  •  Donec 
  
   
  
   

 
•  sit amet