css点击按钮显示图片

在网页设计中，有时我们会需要点击按钮来显示一些图片，这是一种非常常见的交互方式。下面我将向大家介绍如何使用CSS实现这种功能。

/* 首先，我们需要先隐藏需要显示的图片，可以使用display:none将其隐藏起来 */
img {
  display: none;
}
/* 接下来，定义一个类名为“show”的样式 */
.show {
  display: block;
 /* 显示图片 */
}
/* 为按钮添加点击事件 */
button {
  cursor: pointer;
}
button:hover {
  color: red;
 /* 鼠标移上去时改变按钮文字颜色 */
}
/* 利用CSS选择器，将按钮与对应的图片关联起来 */
#show-pic1:target ~ #pic1,
#show-pic2:target ~ #pic2 {
  display: block;
}
 

现在，我们已经定义好了需要使用的CSS样式，接下来在HTML中添加按钮和图片。

<button id="show-pic1">显示图片1</button>
<button id="show-pic2">显示图片2</button> 

在按钮中，我们添加了一个id属性“show-pic”，这个id需要与CSS选择器中的对应id一致，这样CSS就能计算出哪个按钮对应哪张图片了。同时，在图片上也需要添加一个id属性，以便与CSS中的选择器相对应。

最后，我们就可以看到一个由CSS实现的点击按钮显示图片的交互效果了。非常酷炫，不是吗？