How to show/hide a div from on mouseover/mouseout on a TR?_问答_开发者

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, 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="doSt开发者_Go百科uff();">
    <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;
   }

Add display: block to .show style. Also, your css selectors in the example are wrong, replace show with .show and hide with .hide (if that's not a typo).

On mouse over try document.getElementById('yourcontrolID').style['display']='none';

Hope this works.

I am not sure if this is the problem, but it could be that the lmyDiv is not accessible inside the inline function.

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

EDIT: I tested it, and setting the style class dynamically like this did not work in Firefox, IE, Chrome or Safari. But it did actually work in Opera!

EDIT 2:
I was thinking about something else that could be the issue here:

When the tooltip is shown, is it positioned so that the mouse is inside the tooltip area? In that case, it might be that the onmouseout event on the row is triggered, because the row in question does not longer have "direct contact" with the mouse...

If this is the case, you should add:

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

function hide(obj) { document.getElementById(obj.id).style.display ='none'; }

onMouseover='hide(this) call this function on div u want to hide.

If you are willing to risk browser incompatibility (and I mean some fairly older browsers we would all like to forget yet always show up when they shouldn't), you should consider simply dropping the javascript all together and simply use pseudo-classes, like so:

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

Now you have the option of adding the div to each row in the actual html or keeping the javascript that adds the message box, but without the need for event handlers to adjust for style or class switching. You simply create the boxes the way you already do but use the class "messageBox" for each one. Then the css takes it from there.

Give a try at jQuery!