Image rollovers without JavaScript - html

Question

I'm trying to discover a way that doesn't use javascript that allows you to hover over the smaller divs (or images) to change the background of the larger div. Is this possible purely with HTML & CSS?
The example has 2 problems:
1. Only rolling over one of the divs works (because it's straight after)
2. When rolling over that div, the background of the main div reverts after moving the mouse off, so it's not a permanent change
I'm very curious and appreciate any advice here, thanks!
UPDATE:
I've just created this: https://jsfiddle.net/ehzsmusr/
The backgrounds seem to change, but don't stay when you hover over something else. Can this be fixed?
#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>

Answer 1

if you don't mind clicking as you mentioned in the comment, here's one implementation of the checkbox hack mentioned by #kabanus ( using radio buttons instead )
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>
Another hack would be setting the transition-delay to 604800s ( or more ) so the color changes and goes back after that numbers of seconds ( one week later ).
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>