如何在TR上显示/隐藏div上的mouseover/mouseout？

是否可以将弹出窗口（div）动态地附加到表中的某行，以便弹出窗口由鼠标悬停呈现并通过鼠标悬停操作隐藏起来？如何在TR上显示/隐藏div上的mouseover/mouseout？

我放在一起的代码（见下文）拒绝渲染弹出窗口，虽然事件处理程序被调用。

我试图做的事情真的有可能吗？从[mouseover() mouseout() jQuery add/removeClass problem，我猜这个问题可能与CSS

思想的人？

编辑：附加到所选div元素的类按预期更新为mouseover和mouseout。

<link rel="stylesheet" type="text/css" href='mine.css' /> 
<html> 
    <head>  
    </head> 
    <body onload="doStuff();"> 
    <table id="myTable"> 
     <tr id="r1"> 
      <td>R1C1</td> 
      <td>R1C2</td> 
      <td>R1C3</td> 
     </tr> 
     <tr id="r2"> 
      <td>R2C1</td> 
      <td>R2C2</td> 
      <td>R2C3</td> 
     </tr>   
     <tr id="r3"> 
      <td>R3C1</td> 
      <td>R3C2</td> 
      <td>R3C3</td>    
     </tr> 
    </table> 
    </body> 
    <script type="text/javascript"> 
     function doStuff(){ 
      var lRowCount = document.getElementById("myTable").rows.length; 

      for(lIter = 0; lIter < lRowCount; lIter += 1){ 

       var lDynamicColumn = document.createElement("td"); 

       var lmyDiv = document.createElement("div"); 
       var lId = document.getElementById("myTable").rows[lIter].id; 
       // div content to be displayed as Text content; 
       var lText = document.createTextNode("balderdash!"); 

       lmyDiv.id= lId + "_popup"; 
       lmyDiv.style.display="none" ;    

       lmyDiv.appendChild(lText); 

       /*lDynamicColumn.appendChild(lmyDiv); 

       document.getElementById("myTable").rows[lIter].appendChild(lDynamicColumn);*/ 

       document.getElementById("myTable").rows[lIter].appendChild(lmyDiv); 

       document.getElementById("myTable").rows[lIter].onmouseover = function(){ 
        showPopup(lmyDiv.id); 
       } 
       document.getElementById("myTable").rows[lIter].onmouseout = function(){ 
        hidePopup(lmyDiv.id); 
       }; 
      } 
      alert(document.getElementById("myTable").innerHTML); 
     } 

     function showPopup(myId){   
      document.getElementById(myId).className="show"; 
     } 

     function hidePopup(myId){ 
      document.getElementById(myId).className="hide"; 
     } 
    </script> 
</html>

mine.css

.show{ 
    background-color:     #ffffc0; 
    overflow:       auto; 
    z-index:        100; 
    border:    .1em solid rgb(200, 128, 0); 
    float:    right; 
    top:     -10px; 
    margin:    5px; 
    height:    inherit; 
    width:    inherit; 
    position:       absolute; 
    white-space:       no-wrap; 
    } 

.hide{ 
    z-index:   -1; 
    }

来源

2009-10-12 Everyone

查看回答n1313：css文件中的'show'和'hide'应该是'.show'和'.hide' – awe 2009-10-12 12:45:11

有错字/ +：抱歉 – Everyone 2009-10-12 13:30:01

在jQuery给一试！

来源

2009-10-12 10:33:15

请问我可以/ +：必须使用原始javascript目前虽然... – Everyone 2009-10-12 10:49:17

Yay JQuery，一个简单而快速的答案，每个与js相关的问题，无论它是什么！ – n1313 2009-10-12 12:30:03

我不确定这是否是问题，但可能是lmyDiv在内联函数中不可访问。

document.getElementById("myTable").rows[lIter].onmouseover = function(){ 
        showPopup(lmyDiv.id); 
       }

编辑： 我测试了它，并动态地这样设置样式类火狐，IE，铬或Safari浏览器没有工作。但它确实在Opera工作！

编辑2：
我在想别的东西，可能是这里的问题：

当显示工具提示，它被定位，使鼠标在工具提示区域内？在这种情况下，可能会触发行上的onmouseout事件，因为相关行不再与鼠标有“直接接触”...

如果是这种情况，应该添加：

lmyDiv.onmouseover = document.getElementById("myTable").rows[lIter].onmouseover; 
    lmyDiv.onmouseout = document.getElementById("myTable").rows[lIter].onmouseout;

来源

2009-10-12 10:48:30 awe

yikes。这是_odd_ ...当我把警报放入那里的事件处理程序时，IE显示更新 – Everyone 2009-10-12 11:26:11

在鼠标上面试一下document.getElementById（'yourcontrolID'）.style ['display'] ='none';

希望这个工程。

来源

2009-10-12 11:06:51

加display: block至.show风格。另外，示例中的css选择器是错误的，请将show替换为.show和hide，并使用.hide（如果这不是打字错误）。

来源

2009-10-12 12:27:39 n1313

哇，我一开始并没有看到错误的样式选择器。这是你错了吗？！？ – awe 2009-10-12 12:42:41

+1：很好的选择 – Everyone 2009-10-12 13:49:28

赶上，我的回答是否帮助你？ – n1313 2009-10-12 14:04:42

函数隐藏（OBJ） { 的document.getElementById（obj.id）.style。display ='none'; }

的onmouseover ='隐藏（这）呼吁DIV这个函数u要隐藏。

来源

2009-10-12 12:58:52

如果你愿意冒险浏览器不兼容（我指的是一些相当古老的浏览器，我们都想忘记，但总是显示时，他们不应该），你应该考虑简单地将JavaScript放在一起，并简单地使用伪 - 班，像这样：

.trMessage { 
    background-color: #ffffc0; 
    overflow: auto; 
    z-index: 100; 
    border: .1em solid #c88000; 
    float: right; 
    top: -10px; 
    margin: 5px; 
    height: inherit; 
    width: inherit; 
    position: absolute; 
    white-space: no-wrap; 
    display: none; 
} 

.trMessage:hover { 
    display: block; 
}

现在你已经添加的div中每一行实际的HTML或保持，增加了消息框的JavaScript的选项，但无需事件处理程序来调整风格或类别切换。你只需按照你已经做的方式创建盒子，但是每个盒子都使用“messageBox”类。然后css从那里拿走它。

来源

2009-10-12 13:12:46 Anthony

如何在TR上显示/隐藏div上的mouseover/mouseout？

回答

相关问题