Создание границы изображения красный на hover

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

EDIT: Как уже упоминалось в другой ответ, вы можете добавить белую рамку вокруг изображения, поэтому он не будет смещаться при наведении на него. Я включил это в фрагмент кода выше.

Answer 2

Cant комментарий, но мы говорим CSS здесь, а не HTML.

Добавить в рамку по умолчанию, чтобы исправить прыгающее изображение. U может делать

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