3

divしようとしているのは、 with 文字の色を変更することですs

<div class="search_container">
    <input type="text" class="search_field" placeholder="Search..." />
    <div id="magnify_glass">s</div>
</div>

私が試したのはこれです

<script>
    $('.search_field').focus(function() {
        $('#magnify_glass').css('color','#ff0000');
    });
</script>
4

2 に答える 2

5

コードがドキュメントの中にあると仮定すると、<head>必要なのはドキュメント対応ハンドラーだけです。これを試して：

アップデート

blur色を削除するには、ハンドラーも追加する必要があります。

<script>
    $(function() {
        $('.search_field').focus(function() {
            $('#magnify_glass').css('color','#ff0000');
        }).blur(function() {
            $('#magnify_glass').css('color','transparent'); // or whatever the default is.
        });
    });
</script>

また、 a を使用しclassて要素にスタイリングを追加することをお勧めします:

.focus { color: #F00; }

$('.search_field').focus(function() {
    $('#magnify_glass').addClass('focus');
}).blur(function() {
    $('#magnify_glass').removeClass('focus');
});
于 2013-01-18T15:50:39.367 に答える
2

コードは問題なく機能しており、スクリプトによってアクセスされる前に要素の可用性を確保するためにdocument.readyにコードがあり、jquery ライブラリが追加されていることを確認する必要があります。

ライブデモ

$('.search_field').focus(function () {
    $('#magnify_glass').css('color', '#ff0000');
}).blur(function() {
    $('#magnify_glass').css('color', '#000000');
})
于 2013-01-18T15:52:21.710 に答える