不多说,先上代码。还是放在最后吧。

首先就是引入 jQuery 库.

<script type="text/javascript" src="js/jQuery.v1.4.2.js"></script>

然后就是使用 CSS 的定位,将要显示的子层,也就是鼠标移上去显示的 “分享” 和 “收藏” 等文字,定位到父层,也就是图片的某个位置,此处首先给父层一个相对定位的属性(相对定位不给 top 和 left 的话,是不会影响其在文档中的位置),然后给子层一个绝对定位,此时子层脱离文档流,就可以悬浮在文档之上了,此处只是形容,当然也可以这么理解,然后使用 top 和 left 属性,即可使 “分享” 和 “收藏” 等文字处在父层的某个位置。

<style>
/*reset*/
body,div,img,{margin:0;padding:0;}
/*content*/
body {
	margin:0 auto;
	background:#FFF;
}
.pro {
	width:75px;
	margin:100px auto 0 auto;
}
 
.floatTop {
	position:relative;
	width:75px;
	height:75px;
	background:#ccc;
}
 
.fa {
	display:block;
	width:75px;
	height:75px;
}
 
.tips {
	display:none;
	position:absolute;
	padding:6px 2px 2px 6px;
	top:0;
	left:0;
	font-size:13px;
	background:rgba(230,230,230,0.6);
}
 
a {
	text-decoration:none;
}
</style>

当然了,在使效果出来之前,应该先使子层可见,等将其定位之后,再给子层 display:none; 的属性,使子层隐藏。然后对其应用 jQuery 即可。

下来就是 jQuery 代码,此处使用了 hover() 方法,其实和 CSS 中的 hover 伪类类似,即当鼠标悬停时出现的效果。此处给两个函数,即当鼠标悬浮时,执行第一个函数,即找到当前的 jQuery 对象($(this),也就是 .floatTop)的子对象 tips (children(".tips")),然后应用 fadeIn() 动画,即 500 毫秒内显示。

当鼠标离开时,再执行另一个函数,前面都一样,后面的 fadeOut() 即 500 毫秒内隐藏。

<script type="text/javascript">
$(function(){
$(".floatTop").hover(function(){
	$(this).children(".tips").fadeIn(500);
},function(){
	$(this).children(".tips").fadeOut(500);
});
});
</script>

这里是全部的代码,高手指教,低手学习。

<html>
<head>
<script type="text/javascript" src="js/jQuery.v1.4.2.js"></script>
<style>
/*reset*/
body,div,form,input,textarea,p,{margin:0;padding:0;}
/*content*/
body {
	margin:0 auto;
	background:#FFF;
}
.pro {
	width:75px;
	margin:100px auto 0 auto;
}
.floatTop {
	position:relative;
	width:75px;
	height:75px;
	background:#ccc;
}
.fa {
	display:block;
	width:75px;
	height:75px;
}
.tips {
	display:none;
	position:absolute;
	padding:6px 2px 2px 6px;
	top:0;
	left:0;
	font-size:13px;
	background:rgba(230,230,230,0.6);
}
a {
	text-decoration:none;
}
</style>
</head>
<body>
<div class="pro">
	<div class="floatTop">
		<a class="fa" href="images/gs1.gif"><img src="images/gs1.gif" /></a>
		<div class="tips">
			<a class="fx" href="#fx">分享</a>|<a class="sc" href="#sc">收藏</a>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
$(".floatTop").hover(function(){
	$(this).children(".tips").fadeIn(500);
},function(){
	$(this).children(".tips").fadeOut(500);
});
});
</script>
<body>
</html>

演示在这里: 点击这里