鼠标悬停事件第二次不起作用

时间:2011-09-25 15:00:07

标签: asp.net css

我正在使用asp.net文本框,我正在鼠标悬停事件中显示文本框的边框,并且它第一次完成了它的工作,当我点击文本框并再次单击文本框外部时如果我将鼠标悬停在相同的文本框上,则显示边框。

谁能说我在哪里做错了? 提前谢谢!

这是我的css代码:

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

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

以下是我使用它的方式:

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

2 个答案:

答案 0 :(得分:2)

" outline: none;"

样式attr在哪里?

答案 1 :(得分:1)

悬停不是第二次工作,因为焦点/模糊的javascript代码正在更改文本框的类值,因此它不再具有“MyTextbox”类。由于您在悬停时的边框更改是基于MyTextbox类完成的,因此在此之后它不再有效。

您应该做的不是设置obj.className = "onfocus",而是将“onfocus”类添加到现有值中,以便它不会丢失。然后,在blur事件期间,您将删除onfocus类,并添加onblur类(同样,不仅仅是完全替换className值)。

This question有一些很好的答案,关于如何在普通的javascript或jQuery中正确添加/删除额外的类(这使得它更容易)。