仅限 CSS - 显示隐藏具有悬停/取消悬停操作的元素？答案

【问题标题】：CSS Only - Show Hide an element with hover/unhover action?仅限 CSS - 显示隐藏具有悬停/取消悬停操作的元素？
【发布时间】：2022-11-27 16:38:18
【问题描述】：

我只想在 CSS 的帮助下在悬停时显示/隐藏变量。这是我的 html：

<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <p>Hover here to see magic</div>
    <div>Hello World</div>
  </body>
</html>

这是我的CSS：

:root {
  --show-state: none;
  --p-color: black;
}
body {
  padding: 2rem;
}

body > div {
  color: var(--p-color);
  display: var(--show-state);
}

body > p {
  border: 2px solid var(--p-color);
  cursor: pointer;
  padding: 1rem;
  color: var(--p-color);
}

body > p:hover {
  --p-color: blue;
  --show-state: block;
}

当我将鼠标悬停在该元素上时，段落颜色会发生变化，因为 --show-state 设置为 block 我应该能够看到 div 但它仍然不可见：

我还附上了代码沙箱来试用：https://codesandbox.io/s/html-code-editor-forked-hv5teh?file=/style.css:0-251

有人可以告诉我我做错了什么，或者仅通过 CSS 根本不可能做到这一点吗？

【问题讨论】：

标签： css

【解决方案1】：

您正在更改 p 元素的变量，而不是整个主体（或 :root）的变量，因此 div 不受影响。

但是，由于 div 位于 p 元素之后并且是其直接兄弟，您可以使用 + 组合符来影响该 div 的 CSS 变量设置。

:root {
  --show-state: none;
  --p-color: black;
}

body {
  padding: 2rem;
}

body>div {
  color: var(--p-color);
  display: var(--show-state);
}

body>p {
  border: 2px solid var(--p-color);
  cursor: pointer;
  padding: 1rem;
  color: var(--p-color);
}

body>p:hover+div {
  --p-color: blue;
  --show-state: block;
}

<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />

  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <p>Hover here to see magic</div>
    <div>Hello World</div>
</body>

</html>

【讨论】：