使用URL更改圖像src懸停使用URL作爲ID

Question

我正在嘗試更改懸停時的圖像src。

我想通過其URL或替代文本來識別圖像，因爲在這種情況下我無法添加類。

我試圖從這個堆棧溢出鏈接中的說明，沒有運氣：

CSS: Change image src on img:hover

懸停在該圖片上的網址時：

https://static1.squarespace.com/static/5463b725e4b06d233c3a876a/t/56a921809cadb641f7ce1a09/1453912583654/Screen+Shot+2016-01-27+at+8.34.20+AM.png?format=750w

我會把它想改爲這張圖片：

（我有這張圖片的鏈接，但是我不能再使用更多的圖片在我的後兩個環節）

這裏是URL到我的網頁：

https://toby-thiermann.squarespace.com/new-index/

謝謝。

Answer 1

通常，像這樣的最佳方法是不使用標籤，而是使用CSS。使用背景圖像方法並將其添加到您的div將允許您換出圖像。

嘗試是這樣的：

<div class="your-class-here"></div> 

然後CSS這樣的：

.your-class-here{ 
    width: 200px; 
    height: 200px; 
    background-image: url("your-non-hover-image") 
    transition: all ease 250ms 
} 
.your-class-here:hover{ 
    background-image: url("your-hover-image") 
} 

我加了一個過渡，這才使得它有點順暢。