CSS implements onMouseOver, onMouseOut effects, and layer menus

CSS implements onMouseOver, onMouseOut effects, and layer menus
<A> label in IE. In fact, all elements should be supported in WEB standards. If you use Mozilla or Opera, you can see that htc can run normally without it. Because htc is unique to IE and cannot be understood by other browsers, it will be ignored without affecting the display of results. The following section of htc is a revision of the hover behavior of IE written by a foreigner. With this code, it is much more convenient, and the most valuable thing is that the above page examples are compatible with IE, Mozilla and Opera. Previously, in html, events such as onMouserOver were used to implement mouse focus control. I never thought of using CSS to simplify the original tedious work until whatever: hover was discovered by accident, I realized that CSS can do a lot of work, and even implement complicated menubar. The core part of the implementation is csshover. the htc file is actually a JScript code that processes all CSS formats and generates onMouseOver and onMouseOut events based on the customized CSS format, implementing the componentization of hover. You only need to specify div: hover {background: # f8f8f8;} to change the background color when moving the cursor over the div layer. Csshover. htc None.gif <attach event = "ondocumentready" handler = "parseStylesheets"/> examples <script language = "JScript"> examples/** InBlock.gif * pseudo DOS-v1.3021350121-hover & activeInBlock.gif * examples * Peterned- http://www.xs4all.nl/~peterned/InBlock.gif * (C) 2005-Peter NederlofInBlock.gif * InBlock.gif * Credits-javasud regular *-Martin ReuringsInBlock.gif *-Robert HansonInBlock.gif * InBlock.gif * howt body {behavior: url ("csshover. htc "); }InBlock.gif * ---------------------------------------------ExpandedSubBlockEnd.gif */InBlock.gifExpandedSubBlockStart.gif var currentSheet, doc = registrant doc ument, activators = {ExpandedSubBlockStart. g Ifonhover: {on: 'onmouseover', off: 'onmouseout'},ExpandedSubBlockStart.gif onactive: {on: 'onmouselow', off: using function parseStylesheets () using inblock.gif var sheets = doc. styleSheets, l = sheets.length?inblock.gif for (var I = 0; I <l; I ?#inblock.gif =function parseS Tylesheet (sheet) has expandedsubblockstart.gif if (sheet. imports) Export expandedsubblockstart.gif try using inblock.gif var imports = sheet. imports, l = imports.length?inblock.gif for (var I = 0; I <l; I ++) }?inblock.gifexpandedsubblockstart.gif try using inblock.gif var rules = (currentSheet = sheet ). rules, l = Rules.length?inblock.gif for (var j = 0; j <l; j ++) then} specify function parseCSSRule (rule) When inblock.gif var select = rule. selectorText, style = when if (! (/(^ | \ S) ([^ a] ([^] + )?) | (A ([^ #.] [^] +) :( hover | active)/I). test (select) |! Style) return;InBlock.gif InBlock.gif var pseudo = select. replace (/[^:] + :( [a-z-] + ). */I, 'on1_1'{;inblock.gif var newSelect = select. replace (/(\. ([a-z0-9 _-] +): [a-z] +) | (: [a-z] +)/gi ,'. $2 '+ fig var className = (/\. ([a-z0-9 _-] * on (hover | active)/i0000.exec(newselect00000000100000000inblock.gif var affected = select. replace (/: hover. * $/, 'Your region inblock.gif var elements = getElementsBySelect (affected); InBloc K.gifInBlock.gif currentSheet. addRule (newSelect, style‑embedded inblock.gif for (var I = 0; I <elements. length; iplus‑policinblock.gif new HoverElement (elements [I], className, role function HoverElement (node, className, events) extends expandedsubblockstart.gif (! Node. hovers) node. hovers = Invalid callback inblock.gif if (node. hovers [className]) returnw.inblock.gif node. hovers [className] = truew.inblock.gifnode.attachevent(events.on,expandedsubblockstart.gif function () {node. className + = ''+ className; specify whether or not to use inblock.gifnode.attachevent(events.off,expandedsubblockstart.gif function () {node. className extends expandedsubblockend.gif node. className. replace (new RegExp ('\ s +' + className, 'G'), ''); Using function getElementsBySelect (rule) using inblock.gif var parts, nodes = Using dockers using inblock.gif parts = rule. split ('{}expandedsubblockstart.gif for (var I = 0; I <parts. length; I ++) using inblock.gif nodes = getSelectedNodes (parts [I], nodes?#expandedsubblockend.gif} return nodes=expandedsubblockend.gif=expandedsubblockstart.gif function getSelecte DNodes (select, elements) using inblock.gif var result, node, nodes = using nested inblock.gif var classname = (/\. ([a-z0-9 _-] +)/i0000.exec(select0000;inblock.gif var identify = (// #([a-z0-9 _-] +)/i0000.exec(select0000;inblock.gif var tagName = select. replace (/(\. | \ # | \:) [a-z0-9 _-] +/I, '{}expandedsubblockstart.gif for (var I = 0; I <elements. length; I ++) using inblock.gif result = tagName? Elements [I]. all. tags (tagName): elements? I =.all=expandedsubblockstart.gif for (var j = 0; j <result. length; j ++) When inblock.gif node = result?j=when inblock.gif if (identify & node. id! = Identify [1]) | (classname &&! (New RegExp ('\ B' +InBlock.gif classname [1] + '\ B 'cmd.exe c (node. className) continue‑inblock.gif nodes [nodes. length] = nodedeskexpandedsubblockend.gif unzip expandedsubblockend.gif} return nodes?expandedblockend.gif=none.gif </script> Test.htm None.gif <! Doctype html public "-// W3C // dtd html 4.01 // EN"> None.gif <title> New Document </title> None.gif <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> None.gif <meta name =" Generator "content =" EditPlus "> None.gif <meta name =" Author "content =" Roger Chen "> None.gif <meta name =" keywords "content =" "> None.gif <meta name =" description "content =" "> ExpandedBlockStart.gif <style> ExpandedSubBlockStart.gif bod Y {behavior: url(csshover.htc?#=expandedsubblockstart.gif table # tbl tr: hover {background: #000000; color: effecffffff#expandedsubblockstart.gif div. test: hover {background: #000000; color: effecffffff1_expandedsubblockstart.gif. test: hover {background: #000000; color: effecffffff1_expandedsubblockstart.gif input. test2: hover {background: #000000; border: 1px dotted Blackfoot sans none.gif </style> None.gifNone.gif <div clas S = "test"> haha </div> <a href = "" class = "test"> 5456456 </a> None.gif <p> table 1: </p> None.gif <table id = "tbl" border = "1" width = "100%"> None.gif <tr> None.gif <td> OK </td> None.gif <td> yes </td> None.gif <td> no </td> None.gif </tr> None.gif <td> haha </td> None.gif <td> fsdfsdf </td> None.gif <td> test </td> None.gif </tr> None.gif <td> wooye Fox </td> None.gif <td> html/css </td> none.gif <td> javascript </td> None.gif </tr> None.gif </ Table> None.gif <p> table 2: </p> None.gif <table id = "tbl" border = "1" width = "100%"> None.gif <tr> None.gif <td> OK </td> None.gif <td> yes </td> None.gif <td> no </td> None.gif </tr> None.gif <td> haha </td> None.gif <td> fsdfsdf </td> None.gif <td> test </td> None.gif </tr> None.gif <td> wooye Fox </td> None.gif <td> html/css </td> none.gif <td> javascript </td> None.gif </tr> None.gif </table> None.gif <input class = "test2"> menubar.htm None.gif <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html> None.gif