当前位置：Gxlcms > css > 推荐css打造经典鼠标触发显示选项

推荐css打造经典鼠标触发显示选项

时间：2021-07-01 10:21:17 帮助过：31人阅读

看到了 分享：绝对经典的滑轮新闻显示(javascript+css) 这个帖子，都是css+js的控制经典，其实单css就可以搞定了，只不过是为了兼容那垃圾的 IE 才不得做个js ， 以下的代码如果去掉js部分地话，在Opear和Firrfox都能正常的，但是IE下就不行了。 大家有兴趣的可以测试一下。也希望能帮到有需要的人。

代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <meta http-equiv="Content-Language" content="zh-CN" /> 
  6. <title>css打造鼠标触发效果</title> 
  7. <meta content="all" name="robots" />  
  8. <meta name="author" content="yyt_by@163.com,huanghai,www.hppd.cn 友情制作" /> 
  9. <meta name="copyright" content="hppd" /> 
  10. <meta name="description" content="hppd,prettydog,honeypig,web设计,交互设计,prettydog" /> 
  11. <meta name="keywords" content="f2blog,phpblog,blog,php,xhtml,css,design,w3c,w3,w3cn,hppd,prettydog,honeypig,web设计,交互设计,prettydog" /> 
  12. <style type="text/css"> 
  13. <!-- 
  14. body { 
  15.     margin: 0; 
  16.     padding: 0; 
  17.     color: #000; 
  18.     font-size: 12px; 
  19.     line-height: 160%; 
  20.     text-align: left; 
  21.     height: 100%; 
  22.     font-family: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande','Lucida Sans Unicode'; 
  23. } 
  24. *{ margin:0; padding:0;} 
  25. h2,h2 a:link,h2 a:hover,h2 a:visited{ 
  26.     font-size: 14px; 
  27.     text-decoration: none; 
  28.     color: #000000; 
  29.     } 
  30. .kw_from { 
  31.     padding:20px 0 0 0px; 
  32.     margin: auto; 
  33.     height: 300px; 
  34.     overflow: hidden; 
  35.     width: 650px; 
  36.    } 
  37. .kw_from .sbtn{ 
  38.     float:left; 
  39.     width:80px; 
  40.     padding: 16px 0 0 0; 
  41. } 
  42. .kw_from .searchMore{ 
  43.     float:left; 
  44.     width:80px; 
  45.     padding: 4px; 
  46. } 
  47. #searchNav { 
  48.     width:430px; 
  49.     float: left; 
  50. } 
  51. #searchNav #conter1, #searchNav #conter3{ 
  52.     float:left; 
  53.     width:250px; 
  54. } 
  55. #searchNav #conter2, #searchNav #conter4{ 
  56.     float:left; 
  57.     width:180px; 
  58. } 
  59. #searchNav ul {  
  60.     padding: 0; 
  61.     margin: 0; 
  62.     list-style: none; 
  63. } 
  64. #searchNav li { 
  65.     float: left;     
  66. } 
  67. #searchNav li ul {  
  68.     display: none;     
  69.     top: 20px;     
  70. } 
  71. #searchNav li:hover ul, #searchNav li.over ul { 
  72.     display: block; 
  73.     float:left; 
  74. } 
  75. #searchNav ul li a{ 
  76.     float:left; 
  77.     display:block; 
  78.     font-size:12px; 
  79.     padding:3px; 
  80.     text-decoration: none; 
  81.     color: #777; 
  82. } 
  83. #searchNav ul li a:hover{ 
  84.     background-color:#f4f4f4; 
  85. } 
  86. #searchNav #jobKw{ 
  87.     width:220px; 
  88.     height:18px; 
  89. } 
  90. #searchNav #cityKw{ 
  91.     width:130px; 
  92.     height:18px; 
  93. } 
  94. --> 
  95. </style> 
  96. <script type="text/javascript"> 
  97. <!--//--><![CDATA[//> 
  98. <!-- 
  99. startList = function() { 
  100.     if (document.all&&document.getElementById) { 
  101.         navRoot = document.getElementById("searchNav"); 
  102.         for (i=0; i<navRoot.childNodes.length; i++) { 
  103.             node = navRoot.childNodes[i]; 
  104.             if (node.nodeName=="LI") { 
  105.                 node.onmouseover=function() { 
  106.                     this.className+=" over"; 
  107.                 } 
  108.                 node.onmouseout=function() { 
  109.                     this.className=this.className.replace(" over", ""); 
  110.                 } 
  111.             } 
  112.         } 
  113.     } 
  114. } 
  115. window.onload=startList; 
  116. //--><!]]> 
  117. </script> 
  118. </head> 
  119. <body> 
  120. <p class="kw_from"> 
  121.   <form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()"> 
  122.       
  123.         <ul id="searchNav"> 
  124.         <li id="conter1"><h2>找什么</h2> 
  125.            <input id="jobKw" name="jobKw" type="text"  /> 
  126.            <ul id="conter3"> 
  127.            <li><a href="#">会计</a> </li> 
  128.            <li><a href="#">网页设计</a></li> 
  129.            <li><a href="#">翻译</a></li> 
  130.            <li><a href="#">家教</a></li>       
  131.            <li><span class="moreCity"><a href="#">更多>> </a></span></li> 
  132.            </ul> 
  133.         </li> 
  134.        <li id="conter2"><h2>在那里</h2> 
  135.            <input id="cityKw" name="cityKw" type="text"  /> 
  136.            <ul id="conter4"> 
  137.            <li><a href="#">北京</a> </li> 
  138.            <li><a href="#">上海</a></li> 
  139.            <li><a href="#">广州</a></li> 
  140.            <li><a href="#">深圳</a></li> 
  141.            <li><a href="#">南京</a></li> 
  142.            <li><a href="#">天津</a></li> 
  143.            <li><a href="#">杭州</a></li> 
  144.            <li><a href="#">成都</a></li> 
  145.            <li><a href="#">重庆</a></li> 
  146.            <li><a href="#">武汉</a></li> 
  147.            <li><a href="#">西安</a></li> 
  148.            <li><a href="#">沈阳</a></li> 
  149.            <li><span class="moreCity"><a href="#">更多城市>></a></span></li> 
  150.            </ul> 
  151.       </li> 
  152.       </ul>  
  153.       <p class="sbtn"> 
  154.       <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" /> 
  155.       </p> 
  156.       <p class="searchMore"> 
  157.         <a href="search_expert.html">高级搜索</a>
  158. <a href="search_sort.html">分类搜索</a>      </p> 
  159.   </form>  
  160. </p> 
  161. </body> 
  162. </html>

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！