Mouse hover event not working for the second time

I am using asp.net text box and I am showing the border for the text box on mouse hover event and its pretty well doing it's job for the first time and when I click on the text box and again click outside the textbox and If I mouse hover the same textbox it dosen;t show me the border.

Can anyone say me where I am doing wrong? Thanks in advance!

Here is my css code:

 .onfocus
{
    border-width: thin;
    border-color: #0033CC;
}
.onblur
{
border:0px;
}

    .MyTextbox:hover{border:1px solid red;}

Here is how I am using it:

<script type ="text/javascript">
  fun开发者_如何学JAVAction Change(obj, evt) {
      if (evt.type == "focus")
          obj.className = "onfocus";
      else if (evt.type == "blur")
          obj.className = "onblur";
  }

  <asp:TextBox ID="txtUsername" runat="server" Style="position: absolute; top: 76px;
            left: 24px; width: 189px; height: 24px; outline: none;" onfocus ="Change(this, event)"
        onblur ="Change(this, event)" BackColor="#FAFFBD" CssClass="MyUsername" ></asp:TextBox>

" outline: none;"

where is the style attr ?

The hover is not working the second time because your javascript code on focus/blur is changing the class value for the textbox so that it no longer has the "MyTextbox" class. Since your border change on hovering is done based on the MyTextbox class, it no longer works after that.

What you should be doing instead of setting obj.className = "onfocus", is to add the "onfocus" class to the existing value so that it is not lost. Then, during the blur event, you would remove the onfocus class, and add in the onblur class (again, not just totally replacing the className value).

This question has some good answers about how you can properly add/remove the extra classes in either plain javascript or with jQuery (which makes it much easier).