테두리가있는 CSS 이미지 스왑이 경계로 점프합니다.

Question

약간의 배경. 나는 수색하고 수색했다. 호버에 테두리를 추가하는 것에 대한 답변이 많이 있지만, 호버링 여부와 상관없이 테이블에 1px 흰색 테두리 스타일이있는 곳은 어디에도 없습니다. 이미지가 마우스를 올리면 점프합니다. 나는 box-sizing: border-box을 시도하고 마우스 오버 스타일에 같은 색 테두리를 추가했습니다. 이 사이트는 오래되었고 원래 개발자는 아니 었습니다. div 대신 테이블을 사용하여 빌드됩니다. 우리는 그것들을 새로운 사이트로 옮기고 있지만 새로운 이미지로이 사이트를 업데이트하려고합니다. 하나의 흑백과 다른 색상. 흑백으로 마우스를 가져 가면 색상 1로 바뀝니다. 우리는 240px (h)로 400px (w) 인 스프라이트를 사용하고 있습니다. 이미지의 크기가 120px이므로 호버 효과의 위치가 변경됩니다.

HTML
<td class="bottom right left stlouis"></td>

CSS

.stlouis { 
    width: 400px; 
    height: 120px; 
    background-image: url(../images/stlouis.jpg); 
    background-position: 0 0; 
} 

.stlouis:hover { 
    background-position: bottom; 
} 

는 당신의 도움을 주셔서 감사합니다!

Answer 1

어쨌든이 문제를 해결하려는 경우 display: block;가 문제를 해결했습니다.