html div怎么两个颜色,javascript – 当另一个焦点在焦点上时,如何更改css中div的颜色...

您可以通过更改html标记来执行此操作,如下所示.

您的选择器#in：focus#input1 {将不起作用,因为将选择下一个兄弟.

#in：focus#input1将选择#in元素旁边的#input1元素.

body {

color: red;

}

#in:focus + #input1 {

color: blue;

}

input1:

由于CSS中没有先前的兄弟选择器,您必须使用Javascript.

香草JS：

var input = document.getElementById('in'),

div = document.getElementById('input1');

input.addEventListener('focus', function() {

div.classList.add('focused');

}, false);

input.addEventListener('blur', function() {

div.classList.remove('focused');

}, false);

body {

color: red;

}

.focused {

color: blue;

}

input1:

如果你正在使用jQuery

$('#in').on('focus', function() {

$('#input1').addClass('focused');

}).on('blur', function() {

$('#input1').removeClass('focused');

});

body {

color: red;

}

.focused {

color: blue;

}

input1: