gpt4 book ai didi

jquery - 聚焦输入更改单独 div 的背景

转载 作者:行者123 更新时间:2023-11-28 01:11:55 25 4
gpt4 key购买 nike

我正在做一个元素,我在这里有点难过,也许有人知道可以做什么。我在一个系统上工作,我将有 6 个输入部分用于我正在使用的系统的颜色选项,我正在做的是等待他们当前关注的输入,它将显示特定的背景图像在系统右侧的一个 div 中,它基本上是一个显示特定输入影响的图表。

这是一个示例图像: enter image description here

我一直在想是否可以像使用 :focus 一样只使用 CSS,但我在那里发现的东西并没有帮助。我确信我可以用 jQuery 做到这一点,但是,我对 jQuery 几乎一无所知。表格,我可以轻松制作,但是,让它改变特定 div 的背景图像是我坚持的地方。

感谢任何想法/帮助。

编辑:例如,我第一次使用 CSS 来解决这个问题是这样的:

<!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">&nbsp;</div>


</body>
</html>

最佳答案

这可以通过 CSS 实现。

使显示区域与输入保持同级,并绝对定位显示区域。

然后您可以使用 general sibling sector ~ 结合 :focus 来实现你想要的。在您的代码中,您使用的是 +,即 adjacent sibling selector

.input-column {
width: 50%;
position: relative;
}

.input-column input {
float: left;
width: 30%;
margin: 5px;
}

.input-column label {
float: left;
width: 30%;
margin: 5px;
clear: left;
}

.display-area {
position: absolute;
top: 0;
left: 70%;
background: red;
width: 200px;
height: 200px;
float: right;
}

.bill:focus~.display-area {
background-image: url('https://www.fillmurray.com/200/200');
}

.billGrey:focus~.display-area {
background-image: url('https://www.fillmurray.com/g/200/200');
}

.nick:focus~.display-area {
background-image: url('https://www.placecage.com/200/200');
}

.nickGrey:focus~.display-area {
background-image: url('https://www.placecage.com/g/200/200');
}
<form>
<div class="input-column">
<!-- <form> could also go here -->

<label for="bill">Bill</label> <input id="bill" class="bill">
<label for="billGrey">Grey Bill</label><input id="billGrey" class="billGrey">
<label for="nickGrey">Grey Nick</label><input id="nickGrey" class="nickGrey">
<label for="nick">Nick</label><input id="nick" class="nick">

<div class="display-area">
</div>
<!-- </form> alternate postion -->
</div>
</form>

这可以通过使用 CSS sprites 来改善消除加载后续图像的延迟

关于jquery - 聚焦输入更改单独 div 的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52048644/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com