<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript特效鼠标飘过弹出悬浮块</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var float_frame,icon;
$(document).ready(function(){
float_frame=$("#float_frame").clone(false);
icon=$("#icon");
float_frame.show();
//鼠标悬浮时
icon.mouseover(function(){
icon.after(float_frame);
});
//鼠标悬浮离开时
icon.mouseout(function(){
float_frame.remove();
});
});
</script>
<style type="text/css" >
#img_icon{
width: 64px;
height: 64px;
}
#float_frame{
width: 300px;
}
strong{
color:#35a5e5;
}
/*
圆角矩形
*/
.circle {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/*
虚线边框
*/
.dashed-border{
border:#35a5e5 1px dashed;
overflow: auto;
}
/**
发光特效,在IE8以下无效
*/
.shine{
transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
border: #35a5e5 1px solid;
border-radius: 4px;
outline: none;
}
.shine:focus {
border:#35a5e5 1px solid;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
/*
悬浮特效
*/
.float_effect{
position:absolute;
z-index: 9999;
}
</style>
</head>
<body>
<span id="icon" ><img id="img_icon" src="images/holdon_b.png" class="circle dashed-border" /></span>
<span>请把鼠标放到图片上来</span>
<div style="display:none;" id="float_frame" class="dashed-border circle float_effect">
<strong>持之以恒</strong>
<div>授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!</div>
</div>
</body>
</html>
截图如下: