jQuery快速高效制作网页—————改变背景图像

最新推荐文章于 2021-06-04 13:49:51 发布

子晴呀

最新推荐文章于 2021-06-04 13:49:51 发布

阅读量618

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36074064/article/details/70808747

本文介绍了一个简单的网页导航栏高亮效果实现方法，通过HTML、CSS和jQuery完成。当鼠标悬停在导航菜单项上时，背景颜色会发生变化。

<!DOCTYPE html>
<html>
  <head>
    <title>shangji3.html</title>
   <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  
    <style type="text/css">
        #menu {
            list-style: none;
            height: 40px;
            line-height: 40px;
            color: #fff;
            font-weight: bold;
            font-size: 12px;
        }

            #menu li a {
              color: #fff;
              text-decoration: none;
            }

            #menu li {
                display: block;
                float: left;
                padding: 0px 20px;
                background-color: #2BA6A7;
            }

            #menu li.on {
                background-color: #147B81;
            }
    </style>
    <script type="text/javascript">
        $(function () {
            $('li').bind( {
                mouseover:function(){
                    $(this).addClass('on');
                },
                mouseout:function(){
                    $(this).removeClass('on');
                }
            });
        
        });
    </script>

  </head>
  
  <body>
    <ul id="menu">
        <li class="on"><a href="#">首页</a></li>
        <li><a href="#">身边团购</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">电影</a></li>
        <li><a href="#">KTV</a></li>
        <li><a href="#">酒店</a></li>
        <li><a href="#">购物</a></li>
    </ul>
  </body>
</html>