0

ユーザーが入力に集中したときに背景色を変更する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>
4

3 に答える 3

1

方法は次のとおりです。フォーカスのあるフォーム フィールドの親 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);
    });
});
于 2013-02-12T00:21:09.393 に答える
0

例のようにフォーカスでアクティブになる基本的なjqueryバージョンを次に示します

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

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

フィドル

于 2013-02-12T00:33:36.937 に答える
0

CSS ステートメントで :hover セレクターを使用できます。JSはまったく必要ありません..

.contact-form ul li { background-color:#000000; }
.contact-form ul li:hover { background-color: #C0C0C0; }
于 2013-02-12T00:25:32.347 に答える