在懸停時製作圖像紅色的邊框

Question

我試圖在懸停時將圖像的邊框設爲紅色，但由於某種原因它不起作用。我究竟做錯了什麼？

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

<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>

Answer 1

冒號後取出的空間。至少可以在Chrome和IE11中運行。

img { border: 1px solid white; } 
 
img:hover { 
 
border: 1px solid red; 
 
}

<img src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>

編輯：作爲另一個答覆中提到，您可能需要爲圖像添加一個白色邊框，所以當你將鼠標懸停在它，它不會移位。我已經將其納入上面的代碼片段中。

Answer 2

無法評論，但我們在這裏說的是CSS，而不是HTML。

添加邊框默認爲修復跳動圖像。你可以做

img { border: 1px solid rgba(0,0,0,0); }