IE の タグ。実際、WEB 標準ではすべての要素がサポートされる必要があります。 Mozilla または Opera を使用している場合は、htc なしで正常に実行できることがわかります。 htc は IE に固有のものであるため、他のブラウザはそれを理解できず、結果の表示に影響を与えることなく無視されます。 以下のhtcは外国人が書いたIEのホバー動作の修正です。 このコードがあるとさらに便利です。そして最も価値のあることは、上記のページの例が IE、Mozilla、Opera と互換性があることです。 以前は、HTML でマウス フォーカスを制御するために onMouserOver やその他のイベントが使用されていましたが、CSS を使用して元の面倒な作業を簡素化するという発想はありませんでした。CSS で次のようなことができることに気づきました。複雑なメニューバーも実装できます。 実装の中核部分は csshoover.htc ファイルで、実際にはすべての CSS 形式の処理を担当する JScript コードであり、カスタマイズされた CSS 形式に従って onMouseOver および onMouseOut イベントを生成し、ホバーのコンポーネント化を実現します。使用する場合は、 div:hover{background:#f8f8f8; } を指定するだけで、マウスが div レイヤーに移動したときに背景色を変更するイベントを実現できます。 csshoover.htc <br>/**<br>* 擬似 - V1.30.050121 - ホバー & アクティブ<br>* ------------------------------------- --------<br>* Peterned - http://www.xs4all.nl/~peterned/<br>* (c) 2005 - Peter Nederlof<br>*<br>* クレジット - Arnoud Berendsen<br>* - Martin Reurings<br>* -ロバート・ハンソン<br>*<br>* ハウト ボディ { behavior:url("csshoover.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<要素.長さ; i++)<br /> new HoverElement(elements[i], className, activators[pseudo]);<br />}<br /><br />function HoverElement(node, className, events) {<br />if(!node.hvers) 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 /> Test.htm New Document <br>body {behavior: url(csshover.htc);}<br>table#tbl tr:hover {background: #000000; color: #ffffff;}<br>div.test:hover {background: #000000; color: #ffffff;}<br>a.test:hover {background: #000000; color: #ffffff;}<br>input.test2:hover {background: #000000; border: 1px dotted black;}<br>haha5456456表格1:OKはいgt;いいえ ;ははfsdfsdf测试木野狐html/cssjavascript表格2: p>OKはい いいえははfsdfsdf测试 ;木野狐html/cssjavascript tr> menubar.htm anything:hover cssmenu <br><br>body {<br> behavior:url("csshoover.htc");<br>}<br><br>* {<br> font-family:arial,tahoma,verdana,helvetica;<br> font-size:12px;<br>}<br><br> /* メニュー */<br><br>ul,li,a {<br> display:block;<br> margin:0;<br> padding:0;<br> border:0;<br>}<br><br>ul {<br> width:150px;<br> border:1px solid #9d9da1;<br> background:white;<br> list-style:none;<br>}<br><br>li {<br> position:relative;<br> padding:1px;<br> padding-left:26px;<br> background:url("images/item_moz.gif" ) no-repeat;<br> z-index:9;<br>}<br> li.folder { background:url("images/item_folder.gif") no-repeat; }<br> li.folder ul {<br> position:absolute;<br> left:120px; /* IE */<br> top:5px;<br> }<br> li.folder>ul { left:140px; } /* その他 */<br><br>a {<br> padding:2px;<br> border:1px solid white;<br> text-decoration:none;<br> color:gray;<br> font-weight:bold;<br> width:100%; /* IE */<br>}<br> li>a { width:auto; } /* その他 */<br><br>li a.submenu {<br> background:url("images/sub.gif") right no-repeat;<br>}<br><br>/* 通常の ホバー */<br><br>a:hover {<br> border- color:gray;<br> background-color:#bbb7c7;<br> color:black;<br>}<br> li.folder a:hover {<br> background-color:#bbb7c7;<br> }<br><br>/* 特定性を持ってホバー */<br><br>li。フォルダー:hover { z-index:10; }<br> <br>ul ul, li:hover ul ul {<br> display:none;<br>}<br><br>li:hover ul, li:hover li:hover ul {<br> display:block;<br>}<br><br> lorem adipiscing 悲しい consectetuer エリート イプサム ドネク 前庭 consectetuer エリート イプサム ドネク 座ってください