当另一个焦点处于焦点时如何更改css中div的颜色

Question

input1当in聚焦时，我想将颜色更改为蓝色。为什么这不起作用？

<div id="input1">input1:</div>
<input id="in">

css：

body {
    color: red;
}

#in:focus + #input1 {
    color: blue; 
}

我还创建了一个jsfiddle

Answer 1

您可以通过如下更改 html 标记来做到这一点。

您的选择器#in:focus + #input1 {将不起作用，因为+将选择下一个兄弟姐妹。

#in:focus + #input1将选择的#input1是元素接下来要#in被聚焦的元素。

您可以阅读有关相邻兄弟选择器的更多信息

更新的小提琴

body {
  color: red;
}
#in:focus + #input1 {
  color: blue;
}

<input id="in">
<div id="input1">input1:</div>

由于 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;
}

<div id="input1">input1:</div>
<input id="in">

如果你使用 jQuery

$('#in').on('focus', function() {
  $('#input1').addClass('focused');
}).on('blur', function() {
  $('#input1').removeClass('focused');
});

body {
  color: red;
}
.focused {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="input1">input1:</div>
<input id="in">