形式李背景变化

Form li background change

本文关键字：背景 变化 李背景      更新时间：2023-09-26

我正在努力实现当用户专注于输入时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添加背景色，退出该字段后，背景色将被删除。

jsFiddle上的工作示例。

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);
    });
});

这里有一个基本的jquery版本，它像一样在焦点上激活

$('.contact-form').on('focus','input,textarea',function() {
    $('.contact-form li').animate({'backgroundColor':'#00FF00'});
    $(this).parent().animate({'backgroundColor':'#FF0000'});
});

小提琴

您可以在CSS语句中使用：hover选择器；根本不需要JS。。

.contact-form ul li { background-color:#000000; }
.contact-form ul li:hover { background-color: #C0C0C0; }
相关文章：