我试图找到一种不使用 javascript 的方法，该方法允许您将鼠标悬停在较小的 div（或图像）上来更改较大 div 的背景。纯粹使用 HTML 和 CSS 可以吗？
该示例有 2 个问题：
1. 仅滚动其中一个 div 有效（因为它紧随其后）
2. 当鼠标滚过该 div 时，主 div 的背景会在鼠标移开后恢复，因此这不是永久更改
我很好奇并感谢这里的任何建议，谢谢！
UPDATE:我刚刚创建了这个：https://jsfiddle.net/ehzsmusr/ https://jsfiddle.net/ehzsmusr/
背景似乎发生了变化，但当您将鼠标悬停在其他物体上时背景不会停留。这个问题可以解决吗？
#main {
width: 300px;
height: 200px;
background: red;
float: left;
}
.hover1 {
float: left;
background: blue;
width: 100px;
height: 75px;
}
.hover2 {
float: left;
background: green;
width: 100px;
height: 75px;
}
.hover1:hover + #main {
background: #ccc
}
.hover2:hover + #main {
background: #ccc
}
<div class='container'>
<div class='hover1'></div>
<div class='hover2'></div>
<div id='main'></div>
</div>
如果您不介意按照评论中提到的方式单击，这里有一个实现复选框黑客 https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css/32721572#32721572@kabanus 提到（使用单选按钮代替）
body {
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 100vh;
background: #eee;
}
input {
display: none;
}
label {
display: block;
width: 50px;
height: 50px;
float: left;
margin: 20px;
}
#redL {
background: red;
}
#greenL {
background: green;
}
#blueL {
background: blue;
}
#red:checked ~ #big {
background: red;
}
#green:checked ~ #big {
background: green;
}
#blue:checked ~ #big {
background: blue;
}
#big {
width: 50vw;
height: 50vh;
background: #fff;
clear: both;
margin: auto;
}
<div id="container">
<input type="radio" id="red" name="color" />
<label for="red" id="redL"></label>
<input type="radio" id="green" name="color" />
<label for="green" id="greenL"></label>
<input type="radio" id="blue" name="color" />
<label for="blue" id="blueL"></label>
<div id="big">
</div>
</div>
另一个黑客将设置transition-delay to 604800s（或更多），因此颜色会发生变化并在该秒数（一周后）后返回。
body {
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 100vh;
background: #eee;
}
#redL {
background: red;
}
#greenL {
background: green;
}
#blueL {
background: blue;
}
label {
display: block;
width: 50px;
height: 50px;
float: left;
margin: 20px;
}
#redL:hover ~ #big {
background: red;
transition-delay: 0s;
}
#greenL:hover ~ #big {
background: green;
transition-delay: 0s;
}
#blueL:hover ~ #big {
background: blue;
transition-delay: 0s;
}
#big {
width: 50vw;
height: 50vh;
background: #fff;
clear: both;
margin: auto;
transition: all .1s 604800s;
}
<div id="container">
<label id="redL"></label>
<label id="greenL"></label>
<label id="blueL"></label>
<div id="big">
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
