没有JavaScript的图像翻转

Question

我试图发现一种不使用javascript的方式，允许您将鼠标悬停在较小的div（或图像）上以更改较大div的背景。这纯粹是用HTML＆amp; CSS？

该示例有两个问题： 1.只滚动其中一个div工作（因为它直接后） 2.当滚动该div时，主div的背景会在关闭鼠标后恢复，因此它不是永久性的更改

我非常好奇，感谢您的任何建议，谢谢！

更新 我刚创建了这个：https://jsfiddle.net/ehzsmusr/

背景似乎发生了变化，但是当你将鼠标悬停在其他东西上时，它们就不会停留。这可以解决吗？

＆＃13;

＆＃13;

#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
}

＆＃13;

<div class='container'>
  
  <div class='hover1'></div>
  <div class='hover2'></div>
  <div id='main'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您没有按照评论中的提及进行点击，请参阅@kabanus提到的the checkbox hack的一个实现（使用单选按钮）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另一个黑客将transition-delay设置为604800s（或更多），以便颜色发生变化并在该秒数（一周之后）之后返回。

＆＃13;

＆＃13;

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

＆＃13;

<div id="container">
  <label id="redL"></label>
  <label id="greenL"></label>
  <label id="blueL"></label>
  
  <div id="big">

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;