zoukankan      html  css  js  c++  java
  • 给你的导航添加底部鼠标跟随

    <!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>
  • 相关阅读:
    Sql inner join
    转:MySQL 的show processlist
    session cookie
    集群和分布式
    设计模式
    Web性能优化——缓存
    关于 java 里面的路径
    1分钟看懂log4j 配置自己想要的日志信息
    spring @bean 的理解
    如何用iptables实现NAT(转)
  • 原文地址:https://www.cnblogs.com/ganler1988/p/2919227.html
Copyright © 2011-2022 走看看