html - 悬停时使图像边框变为红色

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'>

编辑:正如另一个答案中提到的，您可能想在图像周围添加一个白色边框，这样当您将鼠标悬停在图像上时它就不会移动。我已将其合并到上面的代码片段中。