鼠标悬浮显示提示信息(JavaScript)

最新推荐文章于 2024-07-30 17:19:26 发布

dengfu2924

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量5.7k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liudj/p/10514901.html

版权

<!DOCTYPE html>
<html>
<head>
	<title>鼠标悬停显示账号信息</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){ 
	//鼠标悬浮提示账号信息
	var zIndex = 1;
	$(".tipsSpan").mouseover(function(){
        if($(this).find("span").is(":visible")){
            $(this).find("span").css({"visibility":"visible","zIndex":zIndex++});
        }
    });
    $(".tipsSpan").mouseout(function(){
        $(this).find("span").css({"visibility":"hidden"});
    });
});   
</script>
<style type="text/css">
.tipsSpan{
	position: relative;
}
.tips{
	visibility: hidden;
	position: absolute;
	background: #FFFFBB;
	border: 1px solid #000;
	display: inline;
	min-width: 130px;
	min-height: 24px;
	left: 20px;
	top:18px;
}
</style> 
<body>
	<span class="tipsSpan">
		<a href="javascript:void(0)">徐婷婷</a>
		<span class="tips">这是一个提示信息</span>
	</span>
</body>
</html>

　　效果图：

转载于:https://www.cnblogs.com/liudj/p/10514901.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dengfu2924

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬浮显示提示信息(JavaScript)

<!DOCTYPE html><html><head> <title>鼠标悬停显示账号信息</title></head><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>&l...
复制链接

扫一扫