Question

我一定是做错了，但我找不到原因。 Here's the fiddle

为什么这样做：

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

在输入类型文本焦点上应用样式以提交按钮

5 个答案: