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

您在两个选择器之间缺少逗号。您当前定位它的方式意味着您在输入中有一个输入，这是不可能的。

#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 文件