DOM CSS display:none/block switching hover problem

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<!--  The desired performance for this gem would be to:
1. click on table cells
2. edit in INPUT
3. click away, data presented in table cell.

2.0 The table cells have hover highlighting.

**** Problem: IE
When INPUT is switched to display:block through CSS change,
the INPUT will disappear if another hover is activated.
<style type="text/css">
table.rolly a { display:block;
table.rolly a:link {}
table.rolly a:visited {}  
table.rolly a:hover   {  background-color:#ccffff; }
table.rolly a:active {}
/* ie cluge: makes a clickable inside td */
table.rolly a div
/* no hover */
table.rollypause a { display:block;

..vis { visibility:visible}
..hid { visibility:hidden }

..vis { display: block}
input.vis {display:block; border:double 4px #ff0}
..hid { display: none }
<script type="text/javascript">
function InpEdOn(A){

// max 1 INPUT in A
var Inpy = A.getElementsByTagName("INPUT")[0];
var Divtext = A.getElementsByTagName("DIV")[0];
Inpy.className = "vis";
Inpy.value = Divtext.firstChild.nodeValue+ " ";
// not working in NN71

function InpEdOff(Inp){

var Divtext = Inp.parentNode.getElementsByTagName("DIV")[0];
var Tagtxt = new Array();

Inp.className = "hid";
Tagtxt = Inp.value;
Divtext.firstChild.nodeValue = Tagtxt.toString();
<form name="formy" onsubmit="return false;">
<table style="width:100%"  class="rolly" border="5">
<tr><td style="width:33%">
       <div style="display:block; position:relative;">
           <a href="#nojump" class="vis"   onclick="InpEdOn(this)">
       <input type="text" class="hid" style="position:absolute;
    <td><a href="#nojump"><div>1-2</div></a></td>
  <td><a href="#nojump"><div>1-3</div></a></td>
<tr><td><a href="#nojump"><div>2-1 </div></a></td>
  <td><a href="#nojump"><div>2-2</div> </a></td>
  <td><a href="#nojump"><div>2-3</div> </a></td>


Site Timeline