JS特效，鼠标移到超链接上，显示详细信息
日期：2014-05-16 浏览次数：20358 次
求一个JS特效，鼠标移到超链接上，显示详细信息
很简单，晚上也很常见的特效
就是鼠标移到超链接上，然后弹出个pop提示框显示详细信息（不要求延时效果）
但是我需要在那个提示框里能加入超链接和图片
主要问题就是鼠标移动到超链接上，提示框（DIV）就show，鼠标移走后，div就hide
如果提示框div里也有超链接，那么当用户点击div里的超链接时，就会触发原来那个链接的onmouseout，div就hide了，也就是说用户来不及点击div
请大家能不能给出一个示例代码，最好能简单一点，从网上找的一些代码，似乎都很大，实现这个一个效果，代码竟然有8K多，实在看不明白
谢谢了
------解决方案--------------------
上面的标签改了下名字。离开事件里的名字忘了改，有点小问题，现在弄好了
<html>
<head>
<title></title>
</head>
<body>
<div style="filter:alpha(opacity=70); position: absolute; color: #000000; display:none; background-color: #DDEDFB; border: 1px solid #0099CC; font-size:13px;" id="pop">Hi,你好</div>
<a href="#" onmousemove="move(this);" onmouseout="pop.style.display='none';" >哈哈</a>
<script language="javascript" type="text/javascript">
var objDiv = document.getElementById("pop");
function move(){
objDiv.style.left = event.x + 10;
objDiv.style.top = event.y - 10;
objDiv.style.display = '';
}
</script>
</body>
</html>
------解决方案--------------------
<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"}
</script>
<div id="div1" onMouseOut="hide(this)"style="background-color:red;position:absolute; width:200px; height:100px; top:-100px;"><a href="#">你的问题</a>有问题没</div>
<a href="javascript:void(0)" onmouseover=show(this)>点我</a>
<br>
<br>
<br>
<br>
<a href="javascript:void(0)" onmouseover=show(this)>点我</a>
<br>
______________________________________________________________________________
------解决方案--------------------
要作出这种效果,其实很简单啊,DIV和链接之间最好没有空隙
a : onmouseover="showDiv()" onmouseout="hideDiv()"
div : onmouseover="showDiv()" onmouseout="hideDiv()"
CSDN里的这个,浮动框箭头空白处一大块其实也是在div里的
很简单，晚上也很常见的特效
就是鼠标移到超链接上，然后弹出个pop提示框显示详细信息（不要求延时效果）
但是我需要在那个提示框里能加入超链接和图片
主要问题就是鼠标移动到超链接上，提示框（DIV）就show，鼠标移走后，div就hide
如果提示框div里也有超链接，那么当用户点击div里的超链接时，就会触发原来那个链接的onmouseout，div就hide了，也就是说用户来不及点击div
请大家能不能给出一个示例代码，最好能简单一点，从网上找的一些代码，似乎都很大，实现这个一个效果，代码竟然有8K多，实在看不明白
谢谢了
------解决方案--------------------
上面的标签改了下名字。离开事件里的名字忘了改，有点小问题，现在弄好了
<html>
<head>
<title></title>
</head>
<body>
<div style="filter:alpha(opacity=70); position: absolute; color: #000000; display:none; background-color: #DDEDFB; border: 1px solid #0099CC; font-size:13px;" id="pop">Hi,你好</div>
<a href="#" onmousemove="move(this);" onmouseout="pop.style.display='none';" >哈哈</a>
<script language="javascript" type="text/javascript">
var objDiv = document.getElementById("pop");
function move(){
objDiv.style.left = event.x + 10;
objDiv.style.top = event.y - 10;
objDiv.style.display = '';
}
</script>
</body>
</html>
------解决方案--------------------
<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"}
</script>
<div id="div1" onMouseOut="hide(this)"style="background-color:red;position:absolute; width:200px; height:100px; top:-100px;"><a href="#">你的问题</a>有问题没</div>
<a href="javascript:void(0)" onmouseover=show(this)>点我</a>
<br>
<br>
<br>
<br>
<a href="javascript:void(0)" onmouseover=show(this)>点我</a>
<br>
______________________________________________________________________________
------解决方案--------------------
要作出这种效果,其实很简单啊,DIV和链接之间最好没有空隙
a : onmouseover="showDiv()" onmouseout="hideDiv()"
div : onmouseover="showDiv()" onmouseout="hideDiv()"
CSDN里的这个,浮动框箭头空白处一大块其实也是在div里的
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
