如何將懸停邊框添加到IMG標記中的圖像？

Question

我想爲圖片添加一個懸停邊框，但是我想要/需要在同一個標​​籤內部完成，因爲我在Wordpress中對其進行了操作，並且我不知道如何鏈接該類。

換句話說，我需要在img標籤內部的樣式中做所有事情。

到目前爲止，我發現的所有例子都是關於鏈接外部類的。

這是一個Wordpress頁面內的btw。

Answer 1

編輯：只是重新讀您的文章，實現你想要內嵌樣式。如果您想要將CSS添加到您的頁面並使用某個類，請在Wordpress主題中查找style.css文件。

這裏的例子，如果你做的類方式：

要讓邊界出現在圖像內而不是外面，你可以嘗試盒大小：邊界盒

img { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

img:hover { 
    border: 20px solid red; 
} 

如果這不起作用，您可以將邊框添加到混合到背景中的圖像中。因此，例如，如果您有白色背景，請在圖像中添加一個5px的白色邊框，然後在懸停時更改顏色。

img { 
    border: 20px solid white; 
} 

img:hover { 
    border-color: red; 
} 

沒有看到您的代碼我不能太具體，希望這是一些幫助。

Answer 2

您不能在html標籤內使用僞類; 我認爲這是不推薦，但如果你有，你可以使用JS

<img onmouseover="this.style.border = '1px solid #123456'" onmouseout="this.style.border = '0px'" src="yourImg.png"> 

Answer 3

<img src="your-image-file-path-here.jpg" style="padding:5px;border-radius:7px;" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'" /> 

這裏有應用四個關鍵款式：

1. 填充，保持一個背景區寬5個像素的圖像周圍，所以我們可以改變懸停時的背景顏色。
2. 鼠標懸停：更改填充空間的背景顏色。
3. 鼠標：當光標離開圖像時，再次更改bg顏色。
4. 邊框半徑：圍繞懸停邊框的角落。

El Magnifico是對的。您不能使用僞類或css：hover內聯。

您可以將背景顏色更改爲與您的主題相符的任何內容，或者將其完全刪除。您可以更改填充。只要確保爲圖像指定至少1px的固定填充大小，這應該工作。使用鼠標事件添加和刪除css：邊框可能會導致圖像移動。這就是爲什麼我建議你添加填充和改變背景顏色，而不是添加邊框。

我測試了這個。請讓我知道這對你有沒有用。