Mouseover changes style of radnumerictextbox

I have a page where I dynamically create a radcombox, a radnumerictextbox with percent type and a radnumerictextbox with currency type.  Depending on the item selected, I would hide one and display the other.  There is an issue where if a numerictextbox was initially hidden in the code behind and then set to display on the client side, it disappears on mouseover.  It looks like it is applying the riHover class.  Any idea how to fix this?  Thanks.

   -- code behind
   if (cboCommType.SelectedValue == "1")
    {
         txtOngoingPer.Style.Add("display", "inline");
         txtOngoingCurrency.Style.Add("display", "none");                               
     }
    else if (cboCommType.SelectedValue != "4")
    {
         txtOngoingPer.Style.Add("display", "none");
         txtOngoingCurrency.Style.Add("display", "inline");                               
     }

  --client side code
  function cboCommType_OnClientSelectedIndexChanged(sender, eventArgs, ctlId) {
     var item = eventArgs.get_item();
     var selectedValue = item.get_value();

     var txtPer = document.getElementById("ctl00_FormContentPlaceHolder_txtOngoingPer_" + ctlId);
     var txtCur = document.getElementById("ctl00_FormContentPlaceHolder_txtOngoingCurrency_" + ctlId);


    if (selectedValue == "1") {
       txtPer.removeAttribute("disabled")
       txtPer.setAttribute("style", "height: 24px; display:inline");
       txtCur.setAttribute("style", "display:none");
    }
    else {
       txtCur.removeAttribute("disabled")
       txtCur.setAttribute("style", "height: 24px; display:inline");
       txtPer.setAttribute("style", "display:none");
    }
}



--initial for txtOngoingPer (mouseover1.png)


--cboCommType select index change to 1 (mouseover2.png)


--after mousing over textbox, the textbox disappears! (mouseover3.png)