网站导航
：
网学
原创论文
原创专题
网站设计
最新系统
原创论文
论文降重
发表论文
论文发表
UI设计定制
论文答辩PPT格式排版
期刊发表
论文专题
最新论文
推荐专题
热门论文
论文专题
网站首页
论文模板
设计资源
程序设计
设计下载
编程文档
营销学习
游戏频道
参考使用
网学资源
网络学习
网页素材
网页模板
网学软件
学习知识
交易代码
关于网学
安全工程
自动化
保险
表演
财务管理
参考选题
论文选题-查重参考论文
参考论文大全
电气工程及其自动化
电子论文
电子信息工程
电子商务
法律
法学
工程管理
公共关系学
公共事业管理
公路工程
公路交通运输
工商管理
广告学
国际经济与贸易
汉语国际教育
汉语言文学
环境科学与工程
化学
会计学
护理学
交通运输
教育管理
教育研究生
经济学
金融
计算机科学与技术
计算机应用
酒店管理
机械电子工程
机械论文
机械设计制造及其自动化
论文查重
旅游管理
python开发
生物工程
环境工程
数字媒体技术
ios开发
工程造价
家庭教育
农学
家政学
原创检测通过
期刊发表方法
当前位置：
网学
>
设计资源
>
实用代码片段
> 正文
CSS打造经典鼠标触发显示选项
来源：
http://myeducs.cn
联系QQ：
作者：
用户投稿
发布时间：
09/03/05
<!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> <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> <div 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> <div class="sbtn"> <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" /> </div> <div class="searchMore"> <a href="search_expert.html">高级搜索</a><br /><a href="search_sort.html">分类搜索</a> </div> </form> </div> </body> </html>
提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。
上一篇资讯：
获取当前系统字体
下一篇资讯：
中国地图DIV+CSS版
相关资讯
相关文章
中国地图DIV+CSS版
清空代码防止查看源代码
无限级可刷新Js树型菜单dTree
Glider-JS创建优美的页面滑动块效果
simple_accordions
相关专题
多行滚动jQuery循环新闻列表代码
仿51job.com城市选择框特效
带1234的表格换色
JS控制图片滚动的效果
Flash饼状图工具
网学推荐
·
提供系统开发和运行服务
·
提供原创参考资料
·
档案托管服务
·
原创参考论文导航
·
查重服务维普检测低于30%
·
我们提供原创参考论文和原创的参
·
原创的论文资料参考节省时间！
·
论文格式排版 格式核对！
·
UI设计定制、界面设计
·
程序和网站等UI设计定制！
·
原创参考论文参考定制！
·
职称和论文发表,可联系业务我们
·
本科毕业设计(论文)答辩指南
·
程序制作专家
·
信用说明
·
定做论文，定作论文,QQ:3710167
·
程序设计,程序定做,程序开发,程序
原创论文
·
财务管理
·
参考选题
·
论文选题-查重参考论文
·
参考论文大全
·
电气工程及其自动化
·
电子论文
·
电子信息工程
·
电子商务
·
工程管理
·
公共关系学
·
公共事业管理
·
公路工程
·
公路交通运输
·
工商管理
·
广告学
·
家政学
文章排行榜
·
多行滚动jQuery循环新闻列表代码
·
仿51job.com城市选择框特效
·
带1234的表格换色
·
JS控制图片滚动的效果
·
Flash饼状图工具
·
类似51job上的地区选择效果
·
类似QQ首页的无刷新换肤切换样式
·
QQ频道单行多条信息滚动代码
·
js控制页面字体大小
·
3个最常用的JS时间特效
·
给展示的图片加上工具栏
·
带控制按钮的jQuery滚动代码
·
单行jQuery循环滚动新闻代码
·
CSS左右两列自适应高
·
字号缩放代码
·
考验你的心算能力
·
选择大类，小类变灰
·
友好的表格效果
设为首页
|
加入收藏
|
网学首页
|
原创论文
|
计算机原创
版权所有 网学网 [
Myeducs.cn
] 您电脑的分辨率是
像素
Copyright 2008-2020
myeducs.Cn
www.myeducs.Cn
All Rights Reserved
湘ICP备09003080号
常年法律顾问：王律师
