滑过显示消息提示框（提示框与标题分离）

此效果指的是划过的和显示的内容不在划过的标题的内容里

效果如下

代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8"/>
    <style>
        *{padding: 0;margin: 0;list-style: none;}
        .ts-p:hover{color: #0f0;}
        .tsDiv{display: none;position: absolute;left: 10px;top:20px;width: 200px;border:1px solid #096542;padding: 10px;}
    </style>
</head>
<body>
    <p class="ts-p">滑过显示提示</p>
    <div class="tsDiv">
        <h3>注意事项：</h3>
        <p>1.必须穿皮鞋</p>
        <p>2.必须穿西装</p>
    </div>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            var timer = null;
            $('.ts-p').on('mouseenter', function () {
                clearTimeout(timer);
                $('.tsDiv').fadeOut();
                if (!$('.tsDiv').is(":animated")) {
                    $('.tsDiv').fadeIn();
                }
            });
            $('.ts-p').on('mouseleave', function () {
                timer = setTimeout(function () {
                    $('.tsDiv').fadeOut();
                }, 1000)
            });
            $('.tsDiv').hover(function () { clearTimeout(timer); }, function () { $(this).fadeOut(); });
        })
    </script>
</body>
</html>

 

posted @ 2019-07-15 10:53  珊珊家的小孩  阅读(444)  评论(0)    收藏  举报