鼠标光标悬停事件

hove()方法相当于mouseover()与mouseout()事件的组合

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>hover()事件</title>
        <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
        <style type="text/css">
            a {
                color: #000;
                text-decoration: none;
            }
            
            ul {
                list-style: none;
            }
            
            ul li {
                width: 140px;
            }
            
            #menu_1 {
                border: 1px dotted #666;
                border-top: none;
                padding: 0px 5px 5px 5px;
            }
            
            #menu_1 li {
                margin: 5px 0px;
            }
            
            li.fli {
                display: block;
                float: left;
                padding: 0px 10px;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                $("#myaccound").hover(function(){
                    $("#menu_1").css("display","block");
                },
                    function(){
                        $("#menu_1").css("display","none");
                    }
                );
            });
        </script>
    </head>

    <body>
        <div id="nav">
            <ul>
                <li class="fli">
                    <a href="#">我的订单</a>
                </li>
                <li class="fli" id="myaccound">
                    <a href="#">我的宜美惠▼</a>
                    <ul id="menu_1" style="display:none;">
                        <li>
                            <a href="#">我的优惠券</a>
                        </li>
                        <li>
                            <a href="#">收藏夹</a>
                        </li>
                        <li>
                            <a href="#">短信息</a>
                        </li>
                    </ul>
                </li>
                <li class="fli">
                    <a href="#">我网站导航▼</a>
                </li>
            </ul>
        </div>
    </body>

</html>

 

posted @ 2017-12-19 14:36  爱踢两键  阅读(561)  评论(0)  编辑  收藏  举报