如何在另一个焦点处于焦点时更改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将选择#in:focus + #input1为#in元素旁边的#input1元素。

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

更新小提琴

 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"> 

Answer 2

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

可能你必须使用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/