js超链接提示：当鼠标移到超链接下时弹出提示内容且鼠标能复制其中的内容，当鼠标不在超链接和提示内容下时，隐藏提示内容
日期：2014-05-16 浏览次数：20478 次
js超链接提示：当鼠标移到超链接上时弹出提示内容且鼠标能复制其中的内容，当鼠标不在超链接和提示内容上时，隐藏提示内容
当鼠标移到超链接上时弹出提示内容且鼠标能复制其中的内容，当鼠标不在超链接和提示内容上时，隐藏提示内容。
拜托各位大侠指点指点,在下不胜感谢!
------解决方案--------------------
<!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>无标题文档</title>
<script type="text/javascript">
var p="";
function init(){
var a=document.links;
var div=document.getElementById("test");
for(var i=0;i<a.length;i++){
a[i].onmouseover=over;
a[i].onmouseout=function(){
p=window.setTimeout(out,500);
};
}
div.onmouseover=over;
div.onmouseout=function(){
window.setTimeout(out,500);
};
}
function over(e){
window.clearTimeout(p);
var a=e||window.event;
var src=a.srcElement||a.currentTarget;
var x=parseInt(a.clientX)+4;
var y=parseInt(a.clientY)+4;
var div=document.getElementById("test");
div.style.display="block";
if(src.tagName=="A"){
div.innerHTML=src.getAttribute("href");
div.style.left=x+"px";
div.style.top=y+"px";
}
}
function out(e){
var div=document.getElementById("test");
div.style.display="none";
}
window.onload=init;
</script>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.hao123.com">hao123</a>
<div id="test" style="display:none;position:absolute; background-color:#0F0"></div>
</body>
</html>
这样试试
------解决方案--------------------
1 样式
<style type="text/css">
.div1
{
display:none;
position:absolute ;
left:50px;
top:50px;
width:100px;
height:100px;
border:1px solid red ;
z-index:0 ;
}
.div2
{
z-index:10 ;
border:1px solid blue ;
}
</style>
2 jquery代码:
$(function(){
$("#input1").mouseover(function(){
$("#div1").addClass("div2");
$("#div1").show();
});
$("#div1").mouseout(function(){
$("#div1").hide();
});
});
3 html:
<a id="input1" name="input1" href="#" >连接</a>
<div id="div1" class="div1">
弹出层
</div>
当鼠标移到超链接上时弹出提示内容且鼠标能复制其中的内容，当鼠标不在超链接和提示内容上时，隐藏提示内容。
拜托各位大侠指点指点,在下不胜感谢!
------解决方案--------------------
<!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>无标题文档</title>
<script type="text/javascript">
var p="";
function init(){
var a=document.links;
var div=document.getElementById("test");
for(var i=0;i<a.length;i++){
a[i].onmouseover=over;
a[i].onmouseout=function(){
p=window.setTimeout(out,500);
};
}
div.onmouseover=over;
div.onmouseout=function(){
window.setTimeout(out,500);
};
}
function over(e){
window.clearTimeout(p);
var a=e||window.event;
var src=a.srcElement||a.currentTarget;
var x=parseInt(a.clientX)+4;
var y=parseInt(a.clientY)+4;
var div=document.getElementById("test");
div.style.display="block";
if(src.tagName=="A"){
div.innerHTML=src.getAttribute("href");
div.style.left=x+"px";
div.style.top=y+"px";
}
}
function out(e){
var div=document.getElementById("test");
div.style.display="none";
}
window.onload=init;
</script>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.hao123.com">hao123</a>
<div id="test" style="display:none;position:absolute; background-color:#0F0"></div>
</body>
</html>
这样试试
------解决方案--------------------
1 样式
<style type="text/css">
.div1
{
display:none;
position:absolute ;
left:50px;
top:50px;
width:100px;
height:100px;
border:1px solid red ;
z-index:0 ;
}
.div2
{
z-index:10 ;
border:1px solid blue ;
}
</style>
2 jquery代码:
$(function(){
$("#input1").mouseover(function(){
$("#div1").addClass("div2");
$("#div1").show();
});
$("#div1").mouseout(function(){
$("#div1").hide();
});
});
3 html:
<a id="input1" name="input1" href="#" >连接</a>
<div id="div1" class="div1">
弹出层
</div>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
