국경 이동 전체 테이블

Question

내가 바이올린에이 테스트되었습니다

<table> 
    <tr> 
     <td class="changeme">something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
    </tr> 
    <tr> 
     <td class="changeme">something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
    </tr> 
    <tr> 
     <td class="changeme">something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
    </tr> 
    <tr> 
     <td class="changeme">something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
     <td>something</td> 
    </tr> 
</table> 

이 CSS : 난 그냥 조금 효과처럼 터지는 만들고 싶었

.changeme:hover { 
    border:outset; 
    cursor:pointer; 
} 

td 태그에 있지만 마우스를 위아래로 움직일 때이 이상한 물결 모양 효과가 있습니다. 어떻게 제거 할 수 있습니까?

Answer 1

Demo Fiddle

일을보십시오 :

테두리의 폭이 다른 테이블 셀을 상쇄 호버에 추가되고 있기 때문에 '팝'무슨 일이 일어나고

.changeme{ 
    padding:2px; 
} 
.changeme:hover { 
    border:2px outset; 
    padding:0; 
    cursor:pointer; 
} 

. 이를 막으려면 적용 할 경계선 너비와 동일한 셀 패딩을 설정 한 다음 호버에서 제거하십시오. 테두리는이 공간을 매끄럽게 채우고 테이블 구조를 그대로 유지합니다. 오프셋 border 원인을 사용하는 이유

Answer 2

당신은 또한이 특정 시나리오

.changeme:hover { 
    outline:2px solid #f00; 
    padding:2px; 
    cursor:pointer; 
} 

Demo

더 잘 맞는 것 대신 border 재산의 outline을 사용할 수 있습니까? CSS Box Model을 알고있는 경우 border은 내부가 아닌 요소 외부에서 계산되므로 입력시 요소가 흔들립니다. 이 문제를 해결하기 위해 여러 가지 방법이 있습니다

, 하나는

Demo

.changeme{ 
    padding:2px; 
    border: 2px solid transparent; 
} 
.changeme:hover { 
    border:2px solid #f00; 
    padding:2px; 
    cursor:pointer; 
}