如何利用div+css实现鼠标经过背景高亮的导航菜单-创新互联

这篇文章主要介绍“如何利用div+css实现鼠标经过背景高亮的导航菜单”，在日常操作中，相信很多人在如何利用div+css实现鼠标经过背景高亮的导航菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何利用div+css实现鼠标经过背景高亮的导航菜单”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

10余年的大城网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整大城建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“大城网站设计”,“大城网站推广”以来，每个客户项目都认真落实执行。

这是一款鼠标经过后切换背景的导航菜单，简单明了，给新手学习。已测试，兼容IE6、7、8、9，Firefox3、4、5、6，Chrome5以上，Opera，Safare，搜狗，遨游，360，TT ......


运行效果截图如下：

如何利用div+css实现鼠标经过背景高亮的导航菜单

在线演示地址如下：

http://demo.jb51.net/js/2015/div-css-mouse-bg-show-nav-menu-codes/

具体代码如下：

代码如下:

<!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>鼠标经过切换背景的导航菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body,td,th {font-size: 13px;}
h2 {font-size:13px; font-weight:normal; margin:20px auto;}
a:link,a:visited {color:#333333;text-decoration:none;}
#nav {
width:960px;margin-top:3px;text-align:center;background:url(images/bg_nav.gif) repeat-x;border:1px solid #CCC;}
#nav ul{width:700px;margin:0 auto;height:25px;padding:0;text-align:center;background-color:#CCC;border-bottom:5px solid #FFF;}
#nav li {padding:0;list-style: none;display:inline;}
#nav a {float:left;overflow:hidden;width:100px;height:25px;color:#333333;text-decoration:none;background:url(images/nav.gif) top left no-repeat;padding-top:5px;}
#nav a:hover {background-position:0 -30px;}
-->
</style>
</head>
<body>
<h2>办公一百分导航菜单,简单明了，给新手学习。</h2>
<p>已测试，兼容IE6、7、8、9，Firefox3、4、5、6，Chrome5以上，Opera，Safare，搜狗，遨游，360，TT ......</p>
<div id="nav">
 <ul>
   <li><a href="#">首 页</a></li>
   <li><a href="#">业内新闻</a></li>
   <li><a href="#">Word教程</a></li>
   <li><a href="#">Excel教程</a></li>
   <li><a href="#">PPT教程</a></li>
   <li><a href="#">其它教程</a></li>
   <li><a href="#">专题教程</a></li>
 </ul>
</div>
</body>
</html>

到此，关于“如何利用div+css实现鼠标经过背景高亮的导航菜单”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

新闻名称：如何利用div+css实现鼠标经过背景高亮的导航菜单-创新互联
网站URL：https://www.cdcxhl.com/article42/dspohc.html

成都网站建设公司_创新互联，为您提供做网站、响应式网站、网站设计公司、标签优化、虚拟主机、品牌网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

微信小程序开发

网站制作知识

各行业网站