jQuery实现超链接提示效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<style>
#tooltip {
position: absolute;
border: 1px solid #333;
background: #f7f5d1;
padding: 1px;
color: #333;
display: none;
}
</style>
<body>
<p><a href="#" class="tooltip"title="超链接提示1">提示1.</a> </p>
<p><a href="#" class="tooltip"title="超链接提示2">提示2.</a> </p>
</body>
<script>
$(function () {
var x=10;
var y=20;
$("a.tooltip").mouseover(function (e) {
this.myTitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.myTitle+"<\/div>";
$("body").append(tooltip);
$("tooltip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseout(function () {
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
})
</script>
</html>
墨色风雨3回答
-
青春有我
$("tooltip").css({ ====>选择器错了，少了# $("#tooltip").css({ -
慕村9548890
$("tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");改成$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
随时随地看视频慕课网APP
相关分类
JavaScript