[英]Form li background change
我试图在用户专注于输入时实现li标记更改背景颜色的效果(效果可以在这里在页面底部看到。从看到类似的问题来看,似乎不能单纯地做到这一点CSS,所以我想知道如何在jquery中执行此操作(我不知道),这是我的HTML:
<form class="contact-form" action="" method="post" name="contact-form">
<ul>
<li>
<input type="text" name="name" placeholder="NAME" class="test"/>
</li>
<li>
<input type="email" name="email" placeholder="EMAIL" />
</li>
<li>
<textarea name="message" name="message" placeholder="MESSAGE"></textarea>
</li>
<li>
<button class="submit" type="submit">Send</button>
</li>
</ul>
</form>
这是操作方法。 它将为具有焦点的表单字段的父级LI添加背景色,退出该字段后,背景色将被删除。
CSS:
.selected {
background: lightYellow;
}
jQuery的:
$(function () {
var $form = $(".contact-form"),
selectedClass = "selected";
$form.on("focus", "input, textarea", function () {
$(this).closest("li")
.addClass(selectedClass);
});
$form.on("blur", "input, textarea", function () {
$(this).closest("li")
.removeClass(selectedClass);
});
});
您可以在CSS语句中使用:hover选择器; 完全不需要JS。
.contact-form ul li { background-color:#000000; }
.contact-form ul li:hover { background-color: #C0C0C0; }
这是一个基本的jQuery版本,可以像例子一样激活焦点
$('.contact-form').on('focus','input,textarea',function() {
$('.contact-form li').animate({'backgroundColor':'#00FF00'});
$(this).parent().animate({'backgroundColor':'#FF0000'});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.