鼠标光标悬停事件

最新推荐文章于 2024-03-08 15:38:36 发布

weixin_30555753

最新推荐文章于 2024-03-08 15:38:36 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/atlj/p/8065529.html

版权

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>

转载于:https://www.cnblogs.com/atlj/p/8065529.html

weixin_30555753

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标光标悬停事件

hove()方法相当于mouseover()与mouseout()事件的组合<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>hover()事件</title> <scrip...
复制链接

扫一扫