时间戳

首页 > 解决方案 > 使用 CSS 变量显示/隐藏仅包含 HTML、CSS 的图像

html - 使用 CSS 变量显示/隐藏仅包含 HTML、CSS 的图像

问题描述

在这里，我试图在单击按钮（使用 :focus）以显示/隐藏图像时更改 CSS 变量的值（可见性），而不使用 Javascript。

CSS

img {
    width: 200px; height: 200px; margin-left: 40px; margin-top: 30px;
}
:root {
    --c1-vsb: none; --c2-vsb: none;
}
a.c1-imgs {
    visibility: var(--c1-vsb);
}
a.c2-imgs {
    visibility: var(--c2-vsb);
}
#C1:focus { 
    background-color: red;
    --c1-vsb: hidden;
}
#C2:focus {
    background-color: red;
    --c2-vsb: hidden;
}

HTML

<html>
</head>
<body>
<div id="left-panel">
<button class="lp-btn" id="C1">SEAL 1</button><br>
<button class="lp-btn" id="C2">SEAL 2</button><br>
</div>
<div id="right-panel">
<a class="c1-imgs"><img src="https://files.worldwildlife.org/wwfcmsprod/images/HERO_harbor_seal_on_ice/hero_full/87it51b9jx_Harbor_Seal_on_Ice_close_0357_6_11_07.jpg"></a>
<a class="c2-imgs"><img src="https://www-waddensea-worldheritage-org.cdn.gofasterstripes.download/sites/default/files/styles/inline_image_full_width/public/20-11-09_habour%20seals%20report_TTF_5200.JPG?itok=YZs9c_dH"></a>
</div>
</body>
</html>

但是由于某些原因，当我单击按钮将可见性设置为隐藏时，图像不会被隐藏起来。

以前，我尝试使用 css 伪类和 display:none, z-order... 隐藏图像，但卡住了。最后，我认为这应该是简单的出路。

你能提出一个解决我遇到的这个问题的方法吗？我不太确定这是否是正确的方法。谢谢！

标签： htmlcss

解决方案

当您声明#C1:focus { --c1-vsb: hidden; }时，新值--c1-vsb仅适用于#C1，而不适用于整个 HTML 文档。

正如MDN所述：“[...] 给定规则集的选择器定义了自定义属性可以使用的范围”。

推荐阅读