CSS Variables not global?

Question

I'm not sure I understand CSS variables. In the example below, why does the div not appear when the button is hovered over?

:root {
  --op: hidden;  
}
button:hover {
  background-color: yellow;
  --op: visible;
}
div {
  visibility: var(--op);
  width: 100px;
  height: 100px;
  background-color: red;
}

<button>Hover</button><div></div>

Answer 1

You're not actually targeting the hidden div. Try using the adjacent selector.

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

:root {
  --op: hidden;  
}
button:hover {
  background-color: yellow;
}

button:hover + div {
  --op: visible;
}

div {
  visibility: var(--op);
  width: 100px;
  height: 100px;
  background-color: red;
}

<button>Hover</button><div></div>

Answer 2

That's not working because you are setting the variable only for the button, so you are not overriding the global variable.

What you can do is overriding its value with javascript on the button hover. This will exclude any css sibling limitation to work:

function changeGlobalVariable(visible) {
  document.documentElement.style.setProperty('--op', visible ? 'visible' : 'hidden');
}

:root {
  --op: hidden;  
}
button:hover {
  background-color: yellow;
}
div {
  visibility: var(--op);
  width: 100px;
  height: 100px;
  background-color: red;
}

<button
  onmouseover="changeGlobalVariable(true)"
  onmouseout="changeGlobalVariable(false)">Hover</button><div></div>

Answer 3

Try setting up class/id for div like

#idname {
  visibility: var(--op);
  width: 100px;
  height: 100px;
  background-color: red;
}

On view use

<div id="idname"></div>