CSS a : 호버 한 이미지 테두리

Question

나는 몇 개의 패딩과 함께 테이블에 링크 된 이미지를 가지고있다. img : hover 또는 a : hover 테두리 특성을 추가하려고하면 테두리가 나타날 때 모든 것이 테두리가 두꺼운 픽셀 양만큼 이동합니다. 이 동작을 중지 할 수있는 방법이 있습니까?

Answer 1

img { 
    border: solid 10px transparent; 
} 
img:hover { 
    border-color: green; 
} 

Answer 2

문제는 공간을 차지하는 요소에 테두리를 추가한다는 것입니다. 페이지의 다른 요소는 공간을 만들기 위해 이동해야합니다.

해결 방법은 배경과 일치하는 테두리를 추가 한 다음 마우스를 올리면 색상이나 스타일을 변경하는 것입니다. 또 다른 가능성은 원래 의도했던 것보다 큰 상자를 만든 다음 추가하려는 테두리에 맞게 상자의 크기를 조정하는 것입니다.

Answer 3

img:hover { 
    border: solid 2px red; 
    margin: -2px; 
} 

나를 위해 일하는 것 같습니다 (Safari 6.0.5). 국경이 img의 '내부'에 그려지기 때문에 공간이 추가되지 않습니다.