在CSS中,您可以使用偽類(:hover)來(lái)檢測(cè)鼠標(biāo)移入事件,并據(jù)此更換圖片,以下是一個(gè)簡(jiǎn)單的示例,展示了如何實(shí)現(xiàn)這一功能:
您需要在HTML中定義一個(gè)包含圖片的容器,
<div class="image-container"> <img src="image1.jpg" alt="Image 1"> </div>
在CSS中,您可以定義一個(gè)偽類來(lái)檢測(cè)鼠標(biāo)移入事件,并更換圖片:
.image-container:hover { background-image: url('image2.jpg'); }
在這個(gè)示例中,當(dāng)鼠標(biāo)移入到.image-container
上時(shí),背景圖片會(huì)更換為image2.jpg
,您可以根據(jù)需要調(diào)整圖片路徑和樣式。
這種方法僅適用于背景圖片更換,而不適用于直接更換<img>
標(biāo)簽中的src
屬性,如果您需要更復(fù)雜的圖片更換效果,可能需要使用JavaScript或jQuery等腳本語(yǔ)言來(lái)實(shí)現(xiàn)。