CSS 點擊下一張圖片是一個非常常見的功能。在網站的圖片瀏覽頁面中，我們希望用戶能夠通過點擊上一張和下一張按鈕來切換當前的圖片。在這篇文章中，我們將介紹如何使用 CSS 來創建這樣的功能。

/* HTML 代碼 */
上一張下一張
/*CSS 代碼*/
.image-viewer {
position: relative;
}
.image-viewer img, .image-viewer button {
position: absolute;
top: 0;
}
.image-viewer button {
z-index: 1;
}
.image-viewer .prev-button {
left: 0;
}
.image-viewer .next-button {
right: 0;
}
.image-viewer .prev-button:hover, .image-viewer .next-button:hover {
cursor: pointer;
}
.image-viewer img {
opacity: 0;
transition: opacity 0.5s;
}
.image-viewer img:first-child {
opacity: 1;
}
.image-viewer img.active {
opacity: 1;
z-index: 2;
}

我們先看一下 HTML 代碼。在一個 div 容器中，我們放置了三個 img 元素來展示圖片，還有兩個 button 元素用來點擊上一張和下一張。為了讓圖片和按鈕能夠相對定位，我們設置了 .image-viewer 的 position 屬性為 relative，同時每個子元素的 position 屬性為 absolute。

接著我們來看 CSS 代碼。我們使用了一些細節來使得界面更加美觀。通過設置按鈕的 z-index 屬性為 1，我們可以使按鈕處于圖片之上。同時為了讓按鈕在鼠標懸停時有反饋，我們給它們加了一個 hover 事件。我們將 img 元素的 opacity 屬性設置為 0，這樣它們就不可見了。使用 CSS 過渡效果，我們可以讓圖片淡入淡出的效果更加流暢。最后，我們使用 .active 類來實現在點擊按鈕時圖片的切換。

總而言之，這個功能非常簡單，但對于網站的圖片瀏覽頁面卻是至關重要的。通過 CSS 的精妙運用，我們可以為用戶帶來更加友好的使用體驗。