不多说，先上代码。还是放在最后吧。
首先就是引入 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>演示在这里： 点击这里
