Recommended css to create classic mouse-triggered display options-CSS Tutorial-php.cn

Recommended css to create classic mouse-triggered display options

PHP中文网

Release： 2018-09-27 16:37:29

Original

1698 people have browsed it

i saw this post: the absolute classic pulley news display (javascript css). this post is all a classic control of css and js. in fact, it can be done with just css. it is just for compatibility with that rubbish ie, so it is not allowed to be a js. , if the js part of the following code is removed, it will work fine in opear and firrfox, but not in ie. anyone who is interested can test it. i also hope to help those in need.

the code is as follows:

<!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>

Copy after login