jQuery mouseover 鼠标悬停事件

最新推荐文章于 2022-02-23 16:45:44 发布

Marttin2

最新推荐文章于 2022-02-23 16:45:44 发布

阅读量1.1k

点赞数

分类专栏： java js

java 同时被 2 个专栏收录

253 篇文章 1 订阅

订阅专栏

202 篇文章 1 订阅

订阅专栏

转载自：https://blog.csdn.net/LY9457/article/details/79658645 https://blog.csdn.net/LY9457/article/details/80841318

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        #div_toop {
            background-color:#93ee15;
        }
    </style>
    <script src="Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //鼠标位于 a标签上方时发生 mouseover 事件
            $("a.Hyperlink").mouseover(function (e) {
                this.Mytitle = this.title;//获取超链接 title属性的内容
                this.title = ""; //设置 title属性内容为空
                $("body").append("<div id='div_toop'>" + this.Mytitle + "</div>");//将要显示的内容添加到 新建 div标签中 并追加到 body 中
                $("#div_toop")
                    .css({
                        //设置 div 内容位置 
                        "top": (e.pageY + 10) + "px",
                        "position": "absolute",//添加绝对位置
                        "left": (e.pageX + 20) + "px"
                    }).show("fast");// show(spe.ed,callback) speed: xian'shi'su'du
            }).mouseout(function () { //鼠标指针从 a标签 上离开时 发生mouseout 事件
                this.title = this.Mytitle;
                $("#div_toop").remove();//移除对象
            }).mousemove(function (e) { //鼠标指针在 a标签 中移动时 发生mouseout 事件
                $("#div_toop")
                    .css({
                        //设置 div 内容位置 
                        "top": (e.pageY + 10) + "px",
                        "position": "absolute",//添加绝对位置
                        "left": (e.pageX + 20) + "px"
                    });
            });
        });
    </script>
 
</head>
<body>
    <p><a href="#" class="Hyperlink" title="超链接1">超链接·1</a></p>
    <p><input href="#" class="Hyperlink" title="1<合格≤26±0.3">输入框</input></p>
</body>
</html>