한국어
CSS+JS에서 생성된 아주 고전적인 풀리 뉴스 표시 효과를 보았습니다. 이 특수 효과는 실제로 CSS만으로도 수행할 수 있는 쓰레기 IE와의 호환성을 위한 것입니다. 다음은 JS가 될 수 없습니다. 코드의 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; charset=utf-8" /> <meta http-equiv=" Content-Language" content="zh-CN" /> <title>마우스 트리거 효과를 생성하는 CSS</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; 색상: #000; 글꼴 크기: 12px; 텍스트 정렬: 왼쪽; 높이: 100%; 글꼴 계열: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande ' ,'Lucida Sans Unicode'; } *{ 여백:0; 패딩:0;} h2,h2 a:link,h2 a:hover,h2 a:visited{ 글꼴 크기: 14px; : #000000; } .kw_from { 패딩: 20px 0 0px; 오버플로: 숨김: 650px; } .kw_from .sbtn{ float: 왼쪽; 0 ; } .kw_from .searchMore{ float:left; 너비: 80px; } #searchNav #conter1, #searchNav #conter3{ 너비: 250px ; } #searchNav #conter2, #searchNav #conter4{ float:left; 너비: 180px; } #searchNav ul { 여백: 0; 목록 스타일: 없음 } # searchNav li ul { 디스플레이: 없음; 상단: 20px; } #searchNav li:hover ul, #searchNav li.over } #searchNav ul li a{ float:left; 글꼴 -크기:12px; 텍스트 장식: 없음; 색상: #777; } #searchNav ul li a:hover{ background-color:#f4f4f4 } #searchNav #jobKw{ 너비: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="#">자세히 보기>> 스팬> </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>
