怎样实现把鼠标移到附件上出现下图效果？

问答首页 → 移动开发技术

0 0

怎样实现把鼠标移到附件上出现下图效果？5

请大神指导

2014年7月12日 21:23

加勒比好贼
22
0 0 4

查看图片附件

6个答案按时间排序按投票排序

0 0

采纳的答案

用onmouseenter 和onmouseleave可以实现，但是样式要自己调试，给你个例子：

<html>
<head>
<title></title>
</head>

<body>
	<div id="div1" onmouseover=showDiv('div1') onmouseout="hide(this)" style="background-color:#DDEDFB;position:absolute; width:200px; height:100px; top:-100px;">
		<a href="#">下载</a>&nbsp;&nbsp;<a href="#">打开</a>&nbsp;&nbsp;<a href="#">预览</a>
	</div>
	<a href="javascript:void(0)" onmouseover=show(this) onmouseout=hideDiv('div1')>哈哈1</a>
	<br>
	<br>
	<br>
	<br>
	<a href="javascript:void(0)" onmouseover=show(this)>哈哈2</a>
	<br>
</body>

<script language=javascript>
function show(obj)
{    
	var str=getIE(obj)
	var temp=str.split(",")
	var top=temp[0]
	var left=temp[1]
	var objDiv=document.getElementById("div1")
	objDiv.style.display="";
	objDiv.style.left=temp[1];
	objDiv.style.top=parseInt(temp[0])+parseInt(obj.offsetHeight);
}
function getIE(e){
	var t=e.offsetTop;
	var l=e.offsetLeft;
	while(e=e.offsetParent){
		t+=e.offsetTop;
		l+=e.offsetLeft;
	}
	return (t+","+l);
}
function hide(obj){
	obj.style.display="none"
}
function hideDiv(obj)
{
	var objDiv=document.getElementById(obj);
	objDiv.style.display="none";
}
function showDiv(obj)
{
	var objDiv=document.getElementById(obj);
	objDiv.style.display="";
}
</script>
</html>

2014年7月12日 22:11

hae
141
0 1 14

1条评论

0 0

楼主，使用javascript的onmouseover和onmouseout就可以实现这种效果了
例如：<a href="#" onmouseover=show() onmouseout=hide()>图片/按钮</a>

2014年7月15日 13:44

dongzhumao86
40
0 0 4

添加评论

0 0

添加一个鼠标滑过的事件，然后控制隐藏显示div就可以了，找找jquery的例子吧肯定能有
刚看个例子地址是www.javajxw.com

2014年7月14日 17:15

java教学网
30
0 0 1

添加评论

0 0

用事件响应创建出div显示内容等...理念就这样

2014年7月14日 15:53

yoyo837
14
0 0 6

添加评论

0 0

可以使用tooltip插件，推荐一个Poshy Tip

2014年7月14日 13:36

征途2010
30
0 1 3

添加评论

0 0

$("#showInfo").css("position","absolute");
$("#showInfo").css("left",mouse.x+"px");
$("#showInfo").css("top",mouse.y+"px");
}

横坐标：mouse.x换成附件的left + 变动值，
纵坐标：mouse.y换成附件的top + 变动值

2014年7月14日 10:02