호버로 이동하는 패딩이있는 요소

나는 a 요소를 가지고 있습니다. 마우스를 올리면 외곽선을 추가하고 오프셋 및 추가 패딩을 윤곽에 나타냅니다. 문제는 요소가 호버로 이동한다는 것입니다.호버로 이동하는 패딩이있는 요소

HTML

<a href="javascript:void(0)" class="link">test</a>

CSS

http://jsfiddle.net/5pbk9djp/116/

내가 찾은 두 가지 방법

.link { 
    display: inline-block; 
    // margin: 1px 1px; 
} 

.link:hover { 
    outline: 0.125rem dotted red; 
    color: black; 
    outline-offset: -1px; 
    padding: 1px 1px; 
     // margin: 0; 
}

은 다음과 같습니다 호버와의 패딩과 동일한 정상 상태에

이익률은 마진 호버
패딩에 0이되지 호버

나는 확실히 첫 번째 시나리오를 싫어에, 정상 상태에 있어야합니다. 내가 다른 선택의 여지가 없다면, 나는 두 번째로 갈 것이다.

다른 아이디어가 있습니까?

출처

2014-11-06 Mdb

옵션 2와 함께 가지 않는 특별한 이유는 무엇입니까? 내게 그것은 당신의 문제에 대한 해결책처럼 보인다. –

그 이유는이 문제를 수정하는 동안 기본 동작을 변경하기 때문에 결국에는 더 깨끗하게 보일 수 있기 때문입니다. – Mdb

평소 상태의 패딩은 괜찮 으면서, 다른 방법으로는 음수 translateX 및 translateY을 사용하는 것입니다.

는

.link:hover { 
    ... 
    padding: 1px 1px; 
    -webkit-transform: translate(-1px, -1px); 
    -moz-transform: translate(-1px, -1px); 
    -o-transform: translate(-1px, -1px); 
    transform: translate(-1px, -1px); 
}

은

2D 변환은

예 (심지어 IE9에서) well supported있다 : 당신이 브라우저 호환성의 상관 없어이와 http://jsfiddle.net/5pbk9djp/117/

출처

2014-11-06 08:38:03 fcalderan

아주 좋은 해결책입니다. 내가 발견 한 한 가지 문제는 다른 두 개의 링크가있는 경우입니다 : http://jsfiddle.net/5pbk9djp/122/. 이 문제를 어떻게 해결할 수 있는지 알고 있습니까? – Mdb

나는 두 번째 해결 방법을 패딩과 함께 할 것이지만 흥미로운 제안에 감사드립니다. 당신은 그 대답에서 포인트를 얻고 있습니다. – Mdb

모든 접두사는 -moz, -webkit ...이 필요하지

.link { 
    display: inline-block; 
} 

.link:hover { 
    outline: 0.125rem dotted red; 
    color: black; 
    outline-offset: -1px; 
    padding: 1px 1px; 
    position: relative; 
    top: -1px; 
    left: -1px; 
}

예 : https://jsfiddle.net/b7s4d89x/

출처

2014-11-06 09:32:25 areim

호버로 이동하는 패딩이있는 요소

답변

관련 문제