如何使用 CSS 輕鬆更改點擊圖片？

輕鬆更改點擊圖像

厭倦了點擊時更改圖像所需的複雜 JS 代碼？使用偽選擇器或 .active 類別來探索更簡單的解決方案。

理解解決方案

要在不使用大量JS 程式碼的情況下更改點擊圖像，您可以利用以下內容技術：

• 偽選擇器：您可以建立一個偽選擇器以點擊時的元素為目標，並使用CSS 將其設定為不同的影像。
• .active 類別： 透過將 .active 類別套用到點擊時的目標元素，您可以使用 CSS顯示所需的圖片。

實作解決方案

使用偽選擇器：

li:hover img, li:active img {
    display: none;
}

li:hover img#new_image, li:active img#new_image {
    display: block;
}

使用🎜>使用.active類別：

1. 新增.active 類別到目標清單元素： li.active.
2. 定義此類的CSS 規則：

li.active img {
    display: none;
}

li.active img#new_image {
    display: block;
}

.active 類別的範例程式碼：

<ul>
  <li><img>

注意：記得新增適當的點擊事件監聽器或使用內聯onclick觸發變更的屬性。

以上是如何使用 CSS 輕鬆更改點擊圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！