CSS Переменные не глобальные?

Question

Я не уверен, что понимаю CSS переменные. В приведенном ниже примере почему div не отображается, когда кнопка находится над кнопкой мыши?

: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

Вы на самом деле не нацеливаетесь на скрытые div. Попробуйте использовать соседний селектор .

Смежный соседний комбинатор (+) разделяет два селектора и сопоставляет второй элемент, только если он сразу следует за первым элементом и оба являются потомками одного и того же родительского элемента.

: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

Это не работает, потому что вы устанавливаете переменную только для кнопки, поэтому вы не переопределяете глобальную переменную.

Что вы можете сделать, это переопределить ее значение с помощью javascript при наведении курсора на кнопку. Это исключит любое ограничение css родного брата для работы:

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

Попробуйте настроить class / id для div, например

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

Использование при просмотре

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