日本語
CSS + JS で作成した非常に古典的なプーリー ニュース表示エフェクトを見ました。この特殊効果は、実際には CSS だけで実行できます。以下のコードの js 部分を削除すると、Opear と Firrfox では正常に動作しますが、IE では動作しません。
興味のある人は誰でもテストできます。私も困っている人たちを助けたいと思っています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv=" Content-Language" content="zh-CN" /> <title>マウス トリガー効果を作成する CSS</title> <style type="text/css"> <!-- body { margin: 0; padding: 0;カラー: #000; 行の高さ: 160%; テキストの配置: 左; フォントファミリー: 'タホマ、リアル、ベルダナ、'ルシダ グランデ' ,'Lucida Sans Unicode'; } *{ マージン:0; パディング:0;} h2,h2 a:link,h2 a:hover,h2 a:visited{ フォントサイズ: 14px; : #000000; } .kw_from { パディング: 20px 0 0 px; オーバーフロー: 650px; } 0 ; } .kw_from .searchMore{ float: left; width: 80px; } #searchNav #conter1、#searchNav #conter3{ float:left; ; } #searchNav #conter2, #searchNav #conter4{ float: left; width: 180px; } #searchNav ul { float: left; searchNav li ul { 表示: なし; トップ: 20px; } #searchNav li:hover ul、#searchNav li.over ul { 表示: ブロック; }フォント サイズ: 12px; テキスト装飾: なし; } #searchNav ul li a:hover{ width:220px; ; } #searchNav #cityKw{幅:130px;高さ:18px} --> </style> <script type="text/javascript"> <!--//--><![CDATA] < !-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("searchNav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot . childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over" } node.onmouseout=function() { this.className=this.className . replace(" over", ""); } } } } } window.onload=startList; </script> </head> <body> <div class="kw_from" > <form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()"> <ul id="searchNav"> <li id="conter1" > <h2>何を探していますか</h2> <input id="jobKw" name="jobKw" type="text" /> <ul id="conter3"> <li><a href="#" >会計</ a> </li> <li><a href="#">ウェブデザイン</a></li> <li><a href="#">翻訳</a></li > <li> <a href="#">家庭教師</a></li> <li><span class="moreCity"><a href="#">詳細>> spam> </li> </ul> </li> <li id="conter2"><h2>そこ</h2> <input id="cityKw" name="cityKw" type="text" /> < ul id="conter4"> <li><a href="#">北京</a> </li> <li><a href="#">上海</a></li> <li> < a href="#">広州</a></li> <li><a href="#">深セン</a></li> <li><a href="#">南京< /li> a></li> <li><a href="#">天津</a></li> <li><a href="#">杭州</a></li> < li><a href="#">成都</a></li> <li><a href="#">重慶</a></li> <li><a href="#">武漢</li> a></li> <li><a href="#">西安</a></li> <li><a href="#">瀋陽</a>< /li> <li><span class="moreCity"><a href="#">その他の都市>></a></span></li> </ul> </li> </ul > <div class= "sbtn"> <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="ジョブの検索" /> </div> < div class="searchMore "> <a href="search_expert.html">高度な検索</a><br /><a href="search_sort.html">カテゴリ検索</a> </div> </form > </div> </body> </html>
