Jquery 集中输入改变了单独div的背景
我正在做一个项目，我在这里有点困惑，也许有人知道可以做什么。我正在开发一个系统，在这个系统中，我将为我正在开发的系统的颜色选项设置6个输入部分，我正在做的是等待他们当前关注的输入，它将在系统右侧的一个div off中显示一个特定的背景图像，这基本上是一个显示特定输入影响的图表 下面是一个示例图像： 我一直在想，是否可以像使用：focus那样使用CSS，但我在那里发现的并没有帮助。我确信我可以用jQuery来完成这项工作，但是，我对jQuery几乎一无所知。这个表单，我可以很容易地制作出来，但是，让它改变特定div的背景图像是我一直坚持的地方 任何想法/帮助都将不胜感激 编辑： 我第一次使用CSS实现这一点的示例如下：Jquery 集中输入改变了单独div的背景,jquery,html,css,Jquery,Html,Css,我正在做一个项目，我在这里有点困惑，也许有人知道可以做什么。我正在开发一个系统，在这个系统中，我将为我正在开发的系统的颜色选项设置6个输入部分，我正在做的是等待他们当前关注的输入，它将在系统右侧的一个div off中显示一个特定的背景图像，这基本上是一个显示特定输入影响的图表 下面是一个示例图像： 我一直在想，是否可以像使用：focus那样使用CSS，但我在那里发现的并没有帮助。我确信我可以用jQuery来完成这项工作，但是，我对jQuery几乎一无所知。这个表单，我可以很容易地制作出来，但是
<!DOCTYPE html>
<html>
<head>
<style>
#test:focus + #test3{
background-color: yellow;
}
#test2:focus + #test3{
background-color: red;
}
#test3{
width:250px;
height:150px;
border: 1px solid #000;
}
</style>
</head>
<body>
<form>
Input #1: <input id="test" type="text" name="firstname"><br>
Input #2: <input id="test2" type="text" name="lastname">
</form>
<br>
<div id="test3"> </div>
</body>
</html>
#测试：焦点+#测试3{
背景颜色：黄色；
}
#测试2：焦点+#测试3{
背景色：红色；
}
#测试3{
宽度：250px；
高度：150像素；
边框：1px实心#000；
}
输入#1:
输入#2：
数据颜色数据url$（element）.on（'focus'，function（）{…}constdisplayArea=$（'.displayArea'）；
$（'input'）。在（'focus'，function（）上{
const color=$（this.data（'color'）；
css（'background'，color）；
});
$（'input'）。在（'blur'，function（）上{
css（'background'，''）；
})；.form行{
显示器：flex；
调整内容：灵活启动；
}
.输入栏{
保证金：-5px；
}
.输入栏输入{
显示：块；
保证金：5px；
}
.展示区{
左边距：10px；
背景：红色；
宽度：200px；
}这可以通过CSS实现 将显示区域保持为输入的同级，并绝对定位显示区域 然后，您可以将
~:focus+。输入列{
宽度：50%；
位置：相对位置；
}
.输入栏输入{
浮动：左；
宽度：30%；
保证金：5px；
}
.输入列标签{
浮动：左；
宽度：30%；
保证金：5px；
清除：左；
}
.展示区{
位置：绝对位置；
排名：0；
左：70%；
背景：红色；
宽度：200px；
高度：200px；
浮动：对；
}
.bill:focus~.显示区{
背景图像：url（'https://www.fillmurray.com/200/200');
}
.billGrey:焦点~.显示区{
背景图像：url（'https://www.fillmurray.com/g/200/200');
}
.nick:focus~。显示区{
背景图像：url（'https://www.placecage.com/200/200');
}
.nickGrey:焦点~.显示区{
背景图像：url（'https://www.placecage.com/g/200/200');
}
比尔
灰嘴
灰尼克
刻痕
：focus