时间戳

首页 > 解决方案 > CSS变量不是全局的？

css - CSS变量不是全局的？

问题描述

我不确定我是否理解 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>

标签： css

解决方案

您实际上并没有针对 hidden 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>

推荐阅读