推薦css打造經典滑鼠觸發顯示選項_經驗交流

來源:互聯網
上載者:User
看到了 分享:絕對經典的滑輪新聞顯示(javascript+css) 這個文章,都是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> <meta content="all" name="robots" />  <meta name="author" content="yyt_by@163.com,huanghai,www.hppd.cn 友情製作" /> <meta name="copyright" content="hppd" /> <meta name="description" content="hppd,prettydog,honeypig,web設計,互動設計,prettydog" /> <meta name="keywords" content="f2blog,phpblog,blog,php,xhtml,css,design,w3c,w3,w3cn,hppd,prettydog,honeypig,web設計,互動設計,prettydog" /> <style type="text/css"> <!-- body {     margin: 0;     padding: 0;     color: #000;     font-size: 12px;     line-height: 160%;     text-align: left;     height: 100%;     font-family: '宋體',Tahoma ,arial,verdana,sans-serif,'Lucida Grande','Lucida Sans Unicode'; } *{ margin:0; padding:0;} h2,h2 a:link,h2 a:hover,h2 a:visited{     font-size: 14px;     text-decoration: none;     color: #000000;     } .kw_from {     padding:20px 0 0 0px;     margin: auto;     height: 300px;     overflow: hidden;     width: 650px;    } .kw_from .sbtn{     float:left;     width:80px;     padding: 16px 0 0 0; } .kw_from .searchMore{     float:left;     width:80px;     padding: 4px; } #searchNav {     width:430px;     float: left; } #searchNav #conter1, #searchNav #conter3{     float:left;     width:250px; } #searchNav #conter2, #searchNav #conter4{     float:left;     width:180px; } #searchNav ul {      padding: 0;     margin: 0;     list-style: none; } #searchNav li {     float: left;     } #searchNav li ul {      display: none;         top: 20px;     } #searchNav li:hover ul, #searchNav li.over ul {     display: block;     float:left; } #searchNav ul li a{     float:left;     display:block;     font-size:12px;     padding:3px;     text-decoration: none;     color: #777; } #searchNav ul li a:hover{     background-color:#f4f4f4; } #searchNav #jobKw{     width:220px;     height:18px; } #searchNav #cityKw{     width:130px;     height: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> <p 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="#">更多>> </a></span></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="#">南京</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="#">武漢</a></li>            <li><a href="#">西安</a></li>            <li><a href="#">瀋陽</a></li>            <li><span class="moreCity"><a href="#">更多城市>></a></span></li>            </ul>       </li>       </ul>        <p class="sbtn">       <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜尋工作" />       </p>       <p class="searchMore">         <a href="search_expert.html">進階搜尋</a><a href="search_sort.html">分類搜尋</a>      </p>   </form>  </p> </body> </html>
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.