代码之家 › 专栏 › 技术社区 › Shivam Sahil

仅CSS-显示隐藏具有悬停/取消悬停操作的元素?

css

Shivam Sahil · 技术社区 · 3 年前

我只想在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设置为块,我应该能够看到div,但它仍然不可见:

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

有人能告诉我我做错了什么吗?或者这仅仅通过CSS是不可能的吗?

1 回复 | 直到 3 年前

A Haworth 3 年前

您正在更改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>