Mouse hover event not working for the second time

Question

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">
  function 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>

score 2 · Answer 1 · answered Sep 25 '11 at 15:05

2

" outline: none;"

where is the style attr ?

answered Sep 25 '11 at 15:05

Royi Namir

144,742
138
468
792

score 1 · Accepted Answer · edited May 23 '17 at 12:12

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).

Mouse hover event not working for the second time

2 Answers2