jquery悬浮提示框完整实例

更新时间：2026-02-18 21:04:50作者：fang

本文实例讲述了jquery悬浮提示框实现方法。分享给大家供大家参考，具体如下：

<html>

<head>

$(function() {

x = 5;

y = 15;

$("p").hover(function(e) {

otitle = this.title;

this.title = "";

var ndiv = "<div id='leo'>" + otitle + "</div>";

$("body").append(ndiv);

$("#leo").css({

"top" : (e.pageY + y) + "px",

"left" : (e.pageX + x) + "px"

}).show(2000);

$(this).mousemove(function(e) {

$("#leo").css({

"top" : (e.pageY + y) + "px",

"left" : (e.pageX + x) + "px"

}).show(1000);

});

}, function() {

this.title = otitle;

$("#leo").remove();

});

</script>

#leo {

position: absolute;

border: 1px solid grey;

opacity: 0.8;

background: grey;

}

</style>

</head>

<body>

<p title="1dfgfdgdfg">If you click on me, I will disappear.</p>

<p title="2dgfdgdfgdf">If you click on me, I will disappear.</p>

<p title="3dgfdgfdgfder">If you click on me, I will disappear.</p>

<p title="4ghfghfghfhgf">If you click on me, I will disappear.</p>

</body>

</html>

希望本文所述对大家jQuery程序设计有所帮助。

手游推荐