练习-Tooltips效果 - jQuery

Tooltip提示框：鼠标悬浮在链接上，动态创建一个绝对定位的div浮层展示提示文字；鼠标移开时删除浮层。核心知识点：

hover：鼠标移入、移出合成事件
动态创建DOM节点，append追加到body
position:absolute 绝对定位，借助事件对象e.pageX、e.pageY跟随鼠标位置
鼠标移出时remove()删除提示节点

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm33.aspx.cs" Inherits="WebApplication1.WebForm33" %>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
    <style>
        .tooltips {
            width: 150px;
            height: 80px;
            border: 1px solid gray;
            position: absolute;
            background-color:yellowgreen;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("a").hover(
                function (e) {
                    var $div = $("<div class='tooltips'>点击访问</div>");
                    $div.css("top", e.pageY + "px").css("left", e.pageX + "px");
                    $("body").append($div);
                },
                function () {
                    var $div = $(".tooltips");
                    if ($div) {
                        $div.remove();
                    }
                }
            );
        });
    </script>
</head>
<body>
    <p>北盟网校，是一个免费的原创的<a href="[http://www.foxdevelop.com](http://www.foxdevelop.com)">网站</a>学习平台，感谢大家。欢迎大家<a href="[http://www.google.com](http://www.google.com)">访问</a></p>
</body>
</html>
Code language: HTML, XML (xml)

说明：

鼠标移入链接：动态生成tooltip浮层，放在鼠标坐标位置
鼠标移出链接：找到tooltip节点并移除小缺陷：浮层紧贴鼠标，会遮挡文字；可以在pageX/pageY上加一点偏移量优化体验。

Previous: 练习-图片跟着鼠标走的效果

Next: JQUERY的动画效果

发表回复 取消回复

发表回复取消回复