css - 入力タイプ テキスト フォーカスの送信ボタンにスタイルを適用する

Question

何か間違ったことをしているに違いないのですが、その理由がわかりません。これがフィドルです

なぜこれが機能するのですか：

#searchClubsForm input[type=text]:focus {
    background: blue;
}

しかし、これはそうではありませんか？

#searchClubsForm input[type=text]:focus #searchClubsForm input[type=submit] {
    background: blue;
}

Answer 1

わかりましたので、これを変更したいと思うでしょう：

#searchClubsForm input[type=text]:focus #searchClubsForm input[type=submit] {
    background: blue;
}

これに：

#searchClubsForm input[type=text]:focus + input[type=submit] {
    background: blue;
}

これは、隣接する兄弟セレクターを使用して、フォーカス時にボタンのスタイルを設定します。

http://fiddle.jshell.net/mMJZ8/2/

Answer 2

focus親要素上またはhover親要素の子要素のスタイルを設定できますが、子要素でinput[type=submit]はないinput[type=text]ため、現在のサンプルは使用できません。

代わりに、以下のように隣接する兄弟セレクターを使用してみてください。

#searchClubsForm input[type=text]:focus + input[type=submit] {
    background: blue;
}

Answer 3

2 つのセレクターの間にカンマがありません。現在ターゲットにしている方法は、入力内に入力があることを意味しますが、これは不可能です。

#searchClubsForm input[type=text]:focus, #searchClubsForm input[type=submit] {
    background: blue;
}

Answer 4

カンマがありません:

#searchClubsForm input[type=text]:focus, #searchClubsForm input[type=submit] {
    background: blue;
}

Answer 5

Jquery でこれを行う必要があります。

$('#searchClubsForm input[type=text]').focus(function () {
    $('#searchClubsForm input[type=submit]').css({
        'background': 'blue'
    });
});
$('#searchClubsForm input[type=text]').blur(function () {
    $('#searchClubsForm input[type=submit]').css({
        'background': '#F0F0EE'
    });
});

http://fiddle.jshell.net/mMJZ8/3/

ただし、jsファイルがあることを確認してください