模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
CSS鼠标悬停提示_菜单导航特效
查看演示效果
特效Tag：
悬停提示
添加
CSS鼠标提示，鼠标移到哪里，会出现与之内容相对应的提示，CSS+JavaScript结合实现的效果，简洁实用。
<!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> <title>CSS鼠标悬停提示-www.mb5u.com</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; } *{ 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="/" method="get" name="searchForm" id="searchForm" onsubmit_fckprotectedatt="%20onsubmit%3D%22return%20check()%22"> <ul id="searchNav"> <li id="conter1"><h2>找工作么？</h2> <input id="jobKw" name="jobKw" type="text" /> <ul id="conter3"> <li><a href="/" _fcksavedurl="#">模板无忧</a> </li> <li><a href="/" _fcksavedurl="#">源代码</a></li> <li><a href="/" _fcksavedurl="#">网页殊效</a></li> <li><span class="moreCity"><a href="/" _fcksavedurl="#">更多>> </a></span></li> </ul> </li> <li id="conter2"><h2>在那里找？</h2> <input id="cityKw" name="cityKw" type="text" /> <ul id="conter4"> <li><a href="http://mb5u.com" _fcksavedurl="#">中国</a> </li> <li><a href="http://mb5u.com" _fcksavedurl="#">美国</a></li> <li><a href="http://mb5u.com" _fcksavedurl="#">日本</a></li> <li><a href="http://mb5u.com" _fcksavedurl="#">纽约</a></li> <li><a href="http://mb5u.com" _fcksavedurl="#">日本</a></li> <li><a href="http://mb5u.com" _fcksavedurl="#">纽约</a></li> <li><a href="http://mb5u.com" _fcksavedurl="#">上海</a></li> <li><a href="http://mb5u.com" _fcksavedurl="#">深圳</a></li> <li><a href="http://mb5u.com" _fcksavedurl="#">大连</a></li> <li><span class="moreCity"><a href="#" _fcksavedurl="#">更多</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="#" _fcksavedurl="#">高级搜索</a><br /><a href="#" _fcksavedurl="#">分类搜索</a></div> </form> </div> </body> </html>
所属频道：
菜单导航特效
/
更新时间：2010-05-22
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
：
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
CSS实现的三级菜单代码
CSS立体层
UL、LI 无序列表实现纯CSS网站导航菜单
CSS二级菜单，圆角兼容性好
符合标准的滑动门(JS+CSS)
清新兼容性好的水平CSS菜单
CSS仿迅雷视频首页导航条(蓝色)
最简Table选项卡
Js+Table左侧滑出菜单
围成3D模型的JS图片旋转展示代码
猜你也喜欢看这些
仿FLASH图片光照特效
齿轮－－效果非常棒
禁止对图片用右键(仅支持IE)
图片雷达效果，像光照一样
来自腾讯的JavaScript图片滑动
从两侧向中间拼合的JavaScript图片切换效果
飘动的图片
漫天飞雪
图片旋转展示，仿腾讯QQ网的特效
JS图片溶解出现的特效
相关链接：
复制本页链接
|
搜索CSS鼠标悬停提示
特效说明：
菜单导航模板
-
CSS鼠标悬停提示
。
。。