仅使用CSS更改div元素的可见性

Question

没有JS / jQuery可以吗？

例如：我有三个背景图像的div。我想在点击时切换每个图像的一个描述。然后，在单击另一个图像后，我需要隐藏先前的描述并显示一个相关的。

页面加载后可立即显示一个描述。这些段落下面将有内容。

Answer 1

您可以使用pseudo class :target和href设置为您要显示的元素ID的链接。

Simple demo

Demo with three images and three descriptions

Demo with transitions

#show {
    display: none;
}

#show:target {
    display: block;
}

HTML

<a href="#show">Click me</a>
<div id="show">Show me!</div>