Question

是否可以动态地将弹出窗口（div）附加到表格中的行，以便弹出窗口通过鼠标悬停呈现，并通过鼠标移动操作隐藏？

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

我正在尝试做的事情真的可能吗？从[mouseover() mouseout() jQuery add/removeClass problem开始，我猜测问题可能在于CSS

思想的人？

编辑：附加到所选div元素的类将按预期更新，鼠标悬停和鼠标移除。

<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;
   }

Answer 1

将display: block添加到.show样式。另外，示例中的css选择器是错误的，将show替换为.show，将hide替换为.hide（如果这不是拼写错误）。

Answer 2

试试jQuery！

Answer 3

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

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

修改我测试了它，并且动态设置样式类在 Firefox ， IE ， Chrome 或 Safari 。但它确实可以在 Opera 中使用！

编辑2：
我在考虑其他可能是问题的东西：

显示工具提示时，是否将鼠标放在工具提示区域内？在这种情况下，可能是行上的onmouseout事件被触发，因为有问题的行不再与鼠标“直接接触”......

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

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

Answer 4

鼠标悬停尝试document.getElementById（'yourcontrolID'）。style ['display'] ='none';

希望这有效。

Answer 5

功能隐藏（obj） { document.getElementById（obj.id）.style.display ='none'; }

onMouseover ='hide（this）在div上调用此函数想要隐藏。

Answer 6

如果您愿意冒险浏览器不兼容（我的意思是一些相当旧的浏览器，我们都想忘记但总是出现在他们不应该的时候），你应该考虑简单地将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从那里拿走它。

如何在TR上显示/隐藏鼠标移除/鼠标移动中的div？

6 个答案: