CSS 怎么更換多張圖片？

當我們需要在網頁中使用多張圖片時，有時需要更換這些圖片。那么，如何用 CSS 更換多張圖片呢？下面我們將會一步一步地進行講解。

首先，我們需要在 HTML 中添加一個 div 標簽，然后在這個 div 標簽中添加多張圖片，代碼如下：

<div id="image-gallery">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
</div>

接下來，我們需要給這些圖片添加一個公共的 class，代碼如下：

<div id="image-gallery">
<img src="image1.jpg" class="gallery-image" />
<img src="image2.jpg" class="gallery-image" />
<img src="image3.jpg" class="gallery-image" />
<img src="image4.jpg" class="gallery-image" />
</div>

然后，我們需要給每張圖片添加一個相應的 id 值，代碼如下：

<div id="image-gallery">
<img src="image1.jpg" class="gallery-image" id="gallery-image1" />
<img src="image2.jpg" class="gallery-image" id="gallery-image2" />
<img src="image3.jpg" class="gallery-image" id="gallery-image3" />
<img src="image4.jpg" class="gallery-image" id="gallery-image4" />
</div>

接下來，我們需要在 CSS 中定義一個新的 class，用于更換圖片。代碼如下：

.gallery-image:hover {
cursor: pointer;
}
.gallery-image.active {
border: 3px solid #333;
}

在這個 class 中，我們定義了鼠標懸停時的樣式和當前選中圖片時的樣式。接下來，我們需要使用 JavaScript 給這些圖片添加點擊事件，來實現更換圖片。代碼如下：

var images = document.getElementsByClassName("gallery-image");
for (var i = 0; i < images.length; i++) {
images[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}

在這段代碼中，我們獲取了所有 class 為 gallery-image 的圖片，然后為它們添加點擊事件。當點擊某張圖片時，我們先移除當前選中圖片的 active 類，然后為當前被點擊的圖片添加 active 類。

最后，我們在 CSS 中定義 active 類的樣式。代碼如下：

.gallery-image.active {
border: 3px solid #333;
opacity: 0.5;
}

在這個樣式中，我們給選中的圖片添加了一個邊框，并設置了透明度，使得選中的圖片更加明顯。

綜上所述，以上就是 CSS 更換多張圖片的具體步驟和代碼實現方法。希望能對你有所幫助！