Question

当用户专注于输入时，我正在尝试实现li标签更改背景颜色的效果（效果可以在页面底部here看到。从看到类似的问题看起来像它无法在纯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>

Answer 1

这是怎么做的。它会将背景颜色添加到具有焦点的表单域的父LI，并在退出该字段后将删除背景颜色。

Working example on 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);
    });
});

Answer 2

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

.contact-form ul li { background-color:#000000; }
.contact-form ul li:hover { background-color: #C0C0C0; }

Answer 3

这是一个基本的jquery版本，可以像焦点一样激活焦点

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

    $(this).parent().animate({'backgroundColor':'#FF0000'});
});

fiddle

形式li背景改变

3 个答案: