CSS打造经典鼠标触发显示选项

使用CSS打造鼠标触发效果

最新推荐文章于 2023-04-13 13:16:37 发布

商商-77

最新推荐文章于 2023-04-13 13:16:37 发布

阅读量230

点赞数

文章标签： xhtml javascript ViewUI

本文介绍了如何利用CSS实现鼠标触发效果，包括样式定义、事件监听及交互元素的响应方式，详细展示了通过CSS来增强用户体验的方法。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metahttp-equiv="Content-Language"content="zh-CN"/>
<title>css打造鼠标触发效果</title>
<styletype="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,'LucidaGrande','LucidaSansUnicode';
}
*{margin:0;padding:0;}
h2,h2a:link,h2a:hover,h2a:visited{
font-size:14px;
text-decoration:none;
color:#000000;
}
.kw_from{
padding:20px000px;
margin:auto;
height:300px;
overflow:hidden;
width:650px;
}
.kw_from.sbtn{
float:left;
width:80px;
padding:16px000;
}
.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;
}
#searchNavul{
padding:0;
margin:0;
list-style:none;
}
#searchNavli{
float:left;
}
#searchNavliul{
display:none;
top:20px;
}
#searchNavli:hoverul,#searchNavli.overul{
display:block;
float:left;
}
#searchNavullia{
float:left;
display:block;
font-size:12px;
padding:3px;
text-decoration:none;
color:#777;
}
#searchNavullia:hover{
background-color:#f4f4f4;
}
#searchNav#jobKw{
width:220px;
height:18px;
}
#searchNav#cityKw{
width:130px;
height:18px;
}
-->
</style>
<scripttype="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>
<divclass="kw_from">
<formaction="/search.html"method="get"name="searchForm"id="searchForm"onsubmit="returncheck()">
<ulid="searchNav">
<liid="conter1"><h2>找什么</h2>
<inputid="jobKw"name="jobKw"type="text"/>
<ulid="conter3">
<li><ahref="#">会计</a></li>
<li><ahref="#">网页设计</a></li>
<li><ahref="#">翻译</a></li>
<li><ahref="#">家教</a></li>
<li><spanclass="moreCity"><ahref="#">更多>></a></span></li>
</ul>
</li>
<liid="conter2"><h2>在那里</h2>
<inputid="cityKw"name="cityKw"type="text"/>
<ulid="conter4">
<li><ahref="#">北京</a></li>
<li><ahref="#">上海</a></li>
<li><ahref="#">广州</a></li>
<li><ahref="#">深圳</a></li>
<li><ahref="#">南京</a></li>
<li><ahref="#">天津</a></li>
<li><ahref="#">杭州</a></li>
<li><ahref="#">成都</a></li>
<li><ahref="#">重庆</a></li>
<li><ahref="#">武汉</a></li>
<li><ahref="#">西安</a></li>
<li><ahref="#">沈阳</a></li>
<li><spanclass="moreCity"><ahref="#">更多城市>></a></span></li>
</ul>
</li>
</ul>
<divclass="sbtn">
<inputname="submit"type="submit"class="btn4"style="margin:0px15px2px0;"value="搜索工作"/>
</div>
<divclass="searchMore">
<ahref="search_expert.html">高级搜索</a><br/><ahref="search_sort.html">分类搜索</a></div>
</form>
</div>
</body>
</html>