效果图，如下
代码如下：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
// 文字带边框提示条提示条
$('#masterTooltip1').hover(
function(){
// 鼠标悬浮经过事件
var title = "jQuery简单提示条";
//$(this).data('tipText', title);
$('<p class="tooltip"></p>')
.text(title)
.appendTo('.container')
.fadeIn('slow');
},
function() {
// 鼠标悬浮离开事件
$('.tooltip').remove();
}).mousemove(
function(e) {
var mousex = e.pageX + 2; //获得X轴坐标
var mousey = e.pageY + 1; //获得Y轴坐标
$('.tooltip').css({ top: mousey, left: mousex });
});
});
</script>
<style>
.tooltip {
display:none;
position:absolute;
border:1px solid #9abbe8;
background-color:white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: #9abbe8 1px 5px 20px;
-moz-box-shadow: #9abbe8 1px 5px 20px;
box-shadow: #9abbe8 1px 5px 20px;
padding:10px;
color:black;
font-size:12px;
width: 120px;
white-space: normal;
z-index: 1000;
}
</style>
<body>
<div class="container">
<h2>如何制作jQuery效果</h2>
<h3>jQuery简单提示条</h3>
<h3>鼠标经过</h3>
<img id="masterTooltip1" src="aboutus.png"/>
<div class="container">
</div>
</body>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
