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元素。

您可以阅读有关adjacent sibling selector

的更多信息

Updated Fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

由于CSS中没有以前的兄弟选择器，您可以使用Javascript。

Vanilla JS：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

如果你正在使用jQuery

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="input1">input1:</div>
<input id="in">

＆＃13;

Answer 2

您可以仅使用CSS更改颜色，但它不适用于输入元素

可能是你必须使用jQuery

 .ribbon::after {   content: "Look at this orange box.";   background-color: #FFBA10;   border-color: black;   border-style: dotted; }

.ribbon::after {   content: "Look at this orange box.";   background-color: #FFBA10;   border-color: black;   border-style: dotted; }

.ribbon:hover::after {   content: "Look at this orange box.";   background-color: red;   border-color: black;   border-style: dotted; }

http://jsfiddle.net/98f3psLv/5/

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

2 个答案: