Image rollovers without JavaScript

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>

Good chance a permanent change is impossible on hover using CSS. If you don't mind clicking, you can use the [checkbox hack](https://stackoverflow.com/a/32721572) — kabanus, Apr 29 '18 at 18:55
Clicking to change it permanently might be ok, but not preferred. How can it be done when clicking the other elements? And clicking the others after clicking one must work also — user8758206, Apr 29 '18 at 18:58
I'm not sure I understood that last sentence - can you clarify with an example in the question? You can also add clicking as a second option and I'll try and see if what you want is possible. — kabanus, Apr 29 '18 at 19:00
sorry, I'll provide a better explanation. I mean if you click on the smaller blue div, can it change the background colour of the bigger red div - but then click the green div after and it'll still change the background of the bigger div? — user8758206, Apr 29 '18 at 19:03
Sorry I think it is to advance for CSS. Perhaps another master will come and correct me, but I'm afraid that might be too dynamic. — kabanus, Apr 29 '18 at 19:05

Taki · Accepted Answer · 2018-04-29T22:26:53.667

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>

to the best of my knowledge you'll need `js` to keep the state of the element on hover when the mouse goes out, you can't do that with only `css` ( without "hacks" ) , i think that setting a huge `transition-delay` is your best bet for now. — Taki, Apr 30 '18 at 18:42
does the transition delay have to use tags? and can the widths and heights not be vw or vh? — user8758206, Apr 30 '18 at 18:52
yes you can use any unit (px, vw, vh, em ... ) and not just `label` you can do this with any element ( `div`, `a`, ... ) — Taki, Apr 30 '18 at 18:59

Image rollovers without JavaScript

1 Answers1

Linked