MVC TextBoxFor＆amp;的动态CSS类PasswordFor

Question

我有以下代码，可以很好地显示我拥有的日志文本框的CSS样式：

@Html.TextBoxFor(m => m.UserName, new { id = "j_username", @class = "active_text_box", placeholder="UserName"})
@Html.PasswordFor(m => m.Password, new { id = "j_password", @class = "active_text_box", placeholder = "Password" })

但是，当我们没有用鼠标聚焦时，我想将CSS类调用“inactive_text_box”应用于这些文本字段。

这是否有内置属性？

Answer 1

我不知道内置属性，但您可以使用jQuery的.hover（）或.mouseenter（）和.mouseleave（）事件轻松完成此操作。

Answer 2

谢谢Josh＆amp; Jasen得到你的答案。

我非常喜欢Jasen的推荐（.active_text_box：focus {}），因为它很干净，并且不需要在Razor视图上编写脚本。以下是我所做的，以防有人发现这个有用。

@Html.TextBoxFor(m => m.UserName, new { id = "j_username",@class = "login_fields", placeholder = "UserName" })
@Html.PasswordFor(m => m.Password, new { id = "j_password", @class = "login_fields", placeholder = "Password" })

CSS代码：

.login_fields:focus { 
color:#60b7c0;
border:1px solid #cfcfcf;
font-family: Arial;
font-size:16px ;
font-weight: bold;
height: 48px ;
line-height:48px ;
width: 500px ;
padding: 5px 10px 5px 10px;
background-color: #ffffff;

}

.login_fields {
color:#7d7d7d;
border:1px solid #cfcfcf;
font-family: Arial;
font-size:16px ;
font-weight: bold;
height: 48px ;
line-height:48px ;
width: 500px ;
padding: 5px 10px 5px 10px;
background-color: #ebebeb;
}