クラシックなマウストリガー表示オプションを作成するための推奨 CSS-CSSチュートリアル-php.cn

クラシックなマウストリガー表示オプションを作成するための推奨 CSS

PHP中文网

リリース： 2018-09-27 16:37:29

オリジナル

1674 人が閲覧しました

この投稿を見ました: 絶対的な古典的なプーリーニュース表示 (javascript css)。この投稿はすべて css と js の古典的なコントロールです。実際、css だけで実行できます。それは単にあのゴミとの互換性のためです。 ie なので、js にすることはできません。、次のコードの js 部分を削除すると、opear と firrrfox では正常に動作しますが、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>

ログイン後にコピー