Is it possible to attach a popup (div) dynamically to a row in a table such that the popup is rendered by a mouseover, and hidden by a mouseout action?

The code I put together ( see below ) refuses to render the popups, albeit the event handlers are called.

Is what I'm trying to do really possible? From [[mouseover() mouseout() jQuery add/removeClass problem](https://stackoverflow.com/questions/846417/mouseover-mouseout-jquery-add-removeclass-problem]), I'm guessing the problem is probably with the CSS

Thought's people? 

EDIT:
 The class attached to the selected div elements is updated as expected for both, mouseover and 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;
   }

```