鼠标移到文字上弹出提示层JS+CSS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show context</title>
<style type="text/css">
.link{
position: relative;
}
#box{
word-break:break-all;
display: block;
width: 315px;
height: 180px;
border: 1px solid #333;
padding: 12px;
text-align: left;
line-height: 175%;
position: absolute;
}
</style>
<script type="text/javascript" language="javascript" >
function display(){
document.getElementById("box").style.display="block";
}
function disappear(){
document.getElementById("box").style.display="none";
}
</script>
</head>
<body>
<div class="link">
<a href="#" οnmοuseοver="display()" οnmοuseοut="disappear()">show context</a>
<div id="box">省略号里面...全部展示出来省略号里面...全部展示出来省略号里面...全部展示出来省略号里面...全部展示出来省略号里面...全部展示出来省略号里面...全部展示出来</div>
</div>
</body>
</html><script type="text/javascript">
/**οnmοuseοver=showContext(id) οnmοuseοut=hideContext()***/
/***
*鼠标悬停时弹出层div
**/
function showContext(id) {
var div3 = document.getElementById("box"); //将要弹出的层
div3.style.display="block"; //div3初始状态是不可见的，设置可为可见
//window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
div3.style.left=event.clientX+10; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
div3.style.top=event.clientY+10;
div3.style.position="absolute"; //必须指定这个属性，否则div3层无法跟着鼠标动
var divcontext=$("#"+id).text();
document.getElementById("box").innerHTML=divcontext;//div赋值内容
}
/***
*鼠标移开时隐藏div
**/
function hideContext(id) {
document.getElementById("box").style.display="none";
}
</script>
<style type="text/css">
#box {
word-break: break-all;
width: 315px;
height: auto;
border: 1px solid #333;
padding: 4px;
background: #FFFFFF;
text-align: left;
line-height: 150%;
position: absolute;
}
</style>style="cursor:pointer" 光标小手
728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
