在前端开发中，经常需要实现点击一个元素展示当前的状态或效果，比如切换按钮、导航栏激活状态等，这时可以利用CSS来实现。
/* HTML部分 */
<div class="button">点击我显示效果</div>
<div class="show"></div>
/* CSS部分 */
.button {
background-color: #ccc;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.show {
display: none;
width: 200px;
height: 200px;
background-color: #333;
}
.button:hover + .show {
/* 鼠标悬停时的样式 */
display: block;
}
以上代码实现了点击按钮后展示一个黑色的正方形块。在HTML部分中，我们使用了两个DIV，一个用于按钮显示，一个用于展示效果。
CSS部分中，我们给按钮元素设置了一些基本样式，比如背景色、宽度、高度等。同时，我们还设置了光标为手形，使得按钮显得更加“可点”。
接下来，我们设置展示效果块的一些样式，包括宽度、高度、背景色等。为了使其默认时不显示，我们设置了display:none。
最后一部分是最关键的：利用CSS的兄弟选择器+来绑定按钮和展示块，当按钮悬停时，我们利用:hover伪类使展示块显示出来。
通过以上代码，我们可以通过CSS实现一个简单的点击展示效果的功能。在实际开发中，我们可以根据需求设置不同的样式和动画，以达到更好的用户体验。
