给你的导航添加底部鼠标跟随

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript" src="jquery1.7.js"></script>

    <title></title>

    <style type="text/css">

        ul {

            width: 450px;

            height: 50px;

            float: left;

        }



        li {

            list-style: none;

            background-color: #0054ac;

            width: 150px;

            float:left;

            height: 50px;

        }



        a {

            width: 100%; 

            display: block;

            text-align: center;

            height: 50px;

            line-height: 50px;

            color: white;

            text-decoration: none;

        }

    </style>

    <script type="text/javascript">

        $(document).ready(function() {

            var list = $("ul > li");

            $.each(list, function(i) {

                var obj = $(list[i]);

                obj.bind("mouseover", function() {

                    obj.css({"height":"48px","border-bottom":"solid 2px red"});

                });

                obj.bind("mouseout", function() {

                    obj.css({"height":"50px","border-bottom":"none"});

                });

            });

        });

    </script>

</head>

<body>

<ul>

    <li><a href="#">首页</a></li>

    <li><a href="#">我的主页</a></li>

    <li><a href="#">帮助</a></li>

</ul>

</body>

</html>

 

你可能感兴趣的:(导航)