CSS变量不是全局的？答案

【问题标题】：CSS Variables not global?CSS变量不是全局的？
【发布时间】：2020-05-02 01:50:14
【问题描述】：

我不确定我是否理解 CSS 变量。在下面的示例中，为什么当按钮悬停在上面时 div 没有出现？

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

&lt;button&gt;Hover&lt;/button&gt;&lt;div&gt;&lt;/div&gt;

【问题讨论】：

相关：stackoverflow.com/q/55931363/8620333

标签： css

【解决方案1】：

您实际上并不是针对隐藏的div。尝试使用adjacent selector。

相邻的兄弟组合符 (+) 分隔两个选择器，并且仅当它紧跟第一个元素之后才匹配第二个元素，并且它们都是同一个父元素的子元素。

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

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

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

&lt;button&gt;Hover&lt;/button&gt;&lt;div&gt;&lt;/div&gt;

【讨论】：

@TorNato this question 的答案解释了这一点。您的 div 在开始时被绘制一次，并将其可见性设置为隐藏。之后更改变量不再影响 div。
好的，我明白了:)。谢谢你们俩！

【解决方案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>

【讨论】：

【解决方案3】：

尝试为 div 设置 class/id

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

视图使用

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

【讨论】：