onmouseover如何做到这一点阿？

Question

<script language=javascript>
<!--
//***********默认设置定义.*********************
tPopWait=1;    //停留tWait豪秒后显示提示。
tPopShow=60000;    //显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=95;
fontcolor="#333333";
bgcolor="#f7f7f7";
bordercolor="#000000";//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText {  background-color: " + bgcolor + ";color:" + fontcolor + "; border: 1px " + bordercolor + " solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
function showPopupText(){
var o=event.srcElement;
  MouseX=event.x;
  MouseY=event.y;
  if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
       if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
  if(o.dypop!=sPop) {
      sPop=o.dypop;
      clearTimeout(curShow);
      clearTimeout(tFadeOut);
      clearTimeout(tFadeIn);
      clearTimeout(tFadeWaiting);  
      if(sPop==null || sPop=="") {
        dypopLayer.innerHTML="";
        dypopLayer.style.filter="Alpha()";
        dypopLayer.filters.Alpha.opacity=0;  
        }
      else {
        if(o.dyclass!=null) popStyle=o.dyclass 
          else popStyle="cPopText";
        curShow=setTimeout("showIt()",tPopWait);
      }
      
  }
}function showIt(){
    dypopLayer.className=popStyle;
    dypopLayer.innerHTML=sPop;
    popWidth=dypopLayer.clientWidth;
    popHeight=dypopLayer.clientHeight;
    if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
      else popLeftAdjust=0;
    if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
      else popTopAdjust=0;
    dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
    dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
    dypopLayer.style.filter="Alpha(Opacity=0)";
    fadeOut();
}function fadeOut(){
  if(dypopLayer.filters.Alpha.opacity<popOpacity) {
    dypopLayer.filters.Alpha.opacity+=showPopStep;
    tFadeOut=setTimeout("fadeOut()",1);
    }
    else {
      dypopLayer.filters.Alpha.opacity=popOpacity;
      tFadeWaiting=setTimeout("fadeIn()",tPopShow);
      }
}function fadeIn(){
  if(dypopLayer.filters.Alpha.opacity>0) {
    dypopLayer.filters.Alpha.opacity-=1;
    tFadeIn=setTimeout("fadeIn()",1);
    }
}
document.onmouseover=showPopupText;
-->
</script><a href="http://bbs.51js.com" title="<a href='http://www.google.com'>glkrengoreg</a>">http://bbs.51js.com</a>

Answer 1

rjzou2006() ，你提供的方法可以显示tip，但是鼠标却不能移动到tip上进行点击，因为档鼠标离开文字的时候，tip就消失了。

Answer 2

<script language=javascript>
<!--
//***********默认设置定义.*********************
tPopWait=1;    //停留tWait豪秒后显示提示。
tPopShow=60000;    //显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=95;
fontcolor="#333333";
bgcolor="#f7f7f7";
bordercolor="#000000";//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText {  background-color: " + bgcolor + ";color:" + fontcolor + "; border: 1px " + bordercolor + " solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
function showPopupText(){
var o=event.srcElement;
  MouseX=event.x;
  MouseY=event.y;
  if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
       if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
  if(o.dypop!=sPop) {
      sPop=o.dypop;
      clearTimeout(curShow);
      clearTimeout(tFadeOut);
      clearTimeout(tFadeIn);
      clearTimeout(tFadeWaiting);  
      if(sPop==null || sPop=="") {
        dypopLayer.innerHTML="";
        dypopLayer.style.filter="Alpha()";
        dypopLayer.filters.Alpha.opacity=0;  
        }
      else {
        if(o.dyclass!=null) popStyle=o.dyclass 
          else popStyle="cPopText";
        curShow=setTimeout("showIt()",tPopWait);
      }
      
  }
}function showIt(){
    dypopLayer.className=popStyle;
    dypopLayer.innerHTML=sPop;
    popWidth=dypopLayer.clientWidth;
    popHeight=dypopLayer.clientHeight;
    if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
      else popLeftAdjust=0;
    if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
      else popTopAdjust=0;
    dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
    dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
    dypopLayer.style.filter="Alpha(Opacity=0)";
    fadeOut();
}function fadeOut(){
  if(dypopLayer.filters.Alpha.opacity<popOpacity) {
    dypopLayer.filters.Alpha.opacity+=showPopStep;
    tFadeOut=setTimeout("fadeOut()",1);
    }
    else {
      dypopLayer.filters.Alpha.opacity=popOpacity;
      tFadeWaiting=setTimeout("fadeIn()",tPopShow);
      }
}function fadeIn(){
  if(dypopLayer.filters.Alpha.opacity>0) {
    dypopLayer.filters.Alpha.opacity-=1;
    tFadeIn=setTimeout("fadeIn()",1);
    }
}
//document.onmouseover=showPopupText;
//document.onmouseout  = showPopupText;
-->
</script><a href="http://bbs.51js.com" title="<a href='http://www.google.com'>glkrengoreg</a>" onmouseover="showPopupText();">http://bbs.51js.com</a>改了一下可以自己修改firefox没测试过,
ie通过

Answer 3

楼上的你tip是弹出了,但是它不会消失啊.一直留在页面上了,有什么好的解决方案?

Answer 4

现在可以了
<script language=javascript>
<!--
//***********默认设置定义.*********************
tPopWait=1;    //停留tWait豪秒后显示提示。
tPopShow=60000;    //显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=50;
fontcolor="#333333";
bgcolor="#f7f7f7";
bordercolor="#000000";//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText {  background-color: " + bgcolor + ";color:" + fontcolor + "; border: 1px " + bordercolor + " solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText' onmouseover=\"this.style.display=''\" onmouseout=\"this.style.display='none'\"></div>");
function showPopupText(){
var o=event.srcElement;
  MouseX=event.x;
  MouseY=event.y;
  if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
       if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
  if(o.dypop!=sPop) {
      sPop=o.dypop;
      clearTimeout(curShow);
      clearTimeout(tFadeOut);
      clearTimeout(tFadeIn);
      clearTimeout(tFadeWaiting);  
      if(sPop==null || sPop=="") {
        dypopLayer.innerHTML="";
        dypopLayer.style.filter="Alpha()";
        dypopLayer.filters.Alpha.opacity=0;  
        }
      else {
        if(o.dyclass!=null) popStyle=o.dyclass 
          else popStyle="cPopText";
        curShow=setTimeout("showIt()",tPopWait);
      }
      
  }
}function showIt(){
    dypopLayer.className=popStyle;
    dypopLayer.innerHTML=sPop;
    popWidth=dypopLayer.clientWidth;
    popHeight=dypopLayer.clientHeight;
    if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
      else popLeftAdjust=0;
    if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
      else popTopAdjust=0;
    dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
    dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
    dypopLayer.style.filter="Alpha(Opacity=0)";
    fadeOut();
}function fadeOut(){
  if(dypopLayer.filters.Alpha.opacity<popOpacity) {
    dypopLayer.filters.Alpha.opacity+=showPopStep;
    tFadeOut=setTimeout("fadeOut()",1);
    }
    else {
      dypopLayer.filters.Alpha.opacity=popOpacity;
      tFadeWaiting=setTimeout("fadeIn()",tPopShow);
      }
}function fadeIn(){
  if(dypopLayer.filters.Alpha.opacity>0) {
    dypopLayer.filters.Alpha.opacity-=1;
    tFadeIn=setTimeout("fadeIn()",1);
    }
}
-->
</script>
<body>
<a href="http://bbs.51js.com" title="<a href='http://www.google.com'>glkrengoreg</a>" onmouseover="showPopupText();document.all.dypopLayer.style.display=''">http://bbs.51js.com</a>
</body>

Answer 5

呵呵,我没有仔细看你的代码,根据页面效果,我想你可能是通过在那个弹出的div里的鼠标离开事件里将那个div隐藏掉,但这样实现是有问题的.如果我点出了那个div以后,鼠标不移动入div,而是直接移动到其他地方,那么那个div还是会一直存在,一定要鼠标再次进入div然后移出,它才会消失,这显然是不合理的.

Answer 6

rjzou2006() ,根据你提供的代码，我按照自己的要求修改了一下，可是firefox中无法运行，这是我的代码：<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
.cPopText
{
filter: Alpha(Opacity=0);
}
</style>
</head>
<body>
<table width="200px" onmouseover="showPopupText(event);" onmouseout="hidePopupText(event);" border="1">
<tr><td>line1</td></tr>
</table><br />
<table width="200px" onmouseover="showPopupText(event);" onmouseout="hidePopupText(event);" border="1">
<tr><td>line2</td></tr>
</table><br />
<table width="200px" onmouseover="showPopupText(event);" onmouseout="hidePopupText(event);" border="1">
<tr><td>line3</td></tr>
</table>
</body>
</html>
<script type="text/javascript">//***********默认设置定义.*********************
tPopWait=1;    //停留tWait豪秒后显示提示。
tPopShow=60000;    //显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=50;//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
MouseX=0;
MouseY=0;
popLeftAdjust=0;
popTopAdjust=0;function showPopupText(e)
{
    e = window.event || e;
    var o = e.srcElement || e.target;
    MouseX=e.clientX ;
    MouseY=e.clientY;
    clearTimeout(curShow);
    clearTimeout(tFadeOut);
    clearTimeout(tFadeIn);
    clearTimeout(tFadeWaiting); 
    curShow=setTimeout("showIt()",tPopWait);
}function showIt()
{
    var odyp = document.getElementById('dypopLayer');   
    
    var popWidth = odyp.clientWidth;
    var popHeight = odyp.clientHeight;
    
    alert('odyp.clientWidth= ' + odyp.clientWidth + ',body.clientWidth= ' + popWidth);
        
    if(MouseX+12+popWidth > document.body.clientWidth) 
        {popLeftAdjust = -popWidth-24;}
    else 
        {popLeftAdjust=0;}
        
    if(MouseY+12+popHeight > document.body.clientHeight)
        {popTopAdjust=-popHeight-24;}
    else
        {popTopAdjust=0;}
        
    odyp.style.left = MouseX+12+document.body.scrollLeft+popLeftAdjust;
    odyp.style.top = MouseY+12+document.body.scrollTop+popTopAdjust;
    odyp.style.filter = "Alpha(Opacity=0)";
    
    fadeOut();
}function fadeOut()
{
  var odyp = document.getElementById('dypopLayer');
  if(odyp.filters.Alpha.opacity<popOpacity) 
  {
    odyp.filters.Alpha.opacity+=showPopStep;
    tFadeOut=setTimeout("fadeOut()",1);
  }
  else
  {
    odyp.filters.Alpha.opacity=popOpacity;
    tFadeWaiting=setTimeout("fadeIn()",tPopShow);
  }
}function fadeIn()
{
  var odyp = document.getElementById('dypopLayer');
  if(odyp.filters.Alpha.opacity>0)
  {
    odyp.filters.Alpha.opacity-=1;
    tFadeIn=setTimeout("fadeIn()",1);
  }
}function hidePopupText(e)
{
 document.all.dypopLayer.style.display='';
}function showClick()
{
  document.getElementById('dypopLayer').style.display='';
}
function hideClick()
{
  document.getElementById('dypopLayer').style.display='none';
}-->
</script>
<script type="text/javascript">
function CreateDypopLayer()
{
    var odiv = document.createElement("div");
    odiv.id="dypopLayer";
    odiv.style.position = "absolute";
    odiv.style.zIndex = "1000";
    odiv.style.width="112px";
    odiv.style.height="29px";
    odiv.className="cPopText";
    odiv.innerHTML="<img src=\"images/sum.png\" border=\"0\" />";
    odiv.setAttribute("onmouseover", "showClick();");
    odiv.setAttribute("onmouseout", "hideClick();")
    odiv.style.display="none";
    document.body.appendChild(odiv);    
}CreateDypopLayer();</script>