마우스 위에 마우스를 올려 놓기 전에 가상 엘레멘트 공간을 예약하십시오

Question

li에 이미지를 추가하고 싶습니다만 마우스를 올려 놓았을 때만 표시하고 싶습니다. 그러나 DOM에 추가 된 새로운 요소 (이미지)의 결과 인 '이동'효과는 피하고 싶습니다. 공간이 필요하기 때문에 visibility:hidden으로 해결하려고했지만 운이 없었습니다.

간단한 예가 있습니다. 보시다시피, li 님의 오른쪽 위로 이동하고 있습니다.

이것을 달성하는 가장 간단한 방법은 무엇입니까?

http://jsfiddle.net/UQAjh/

Answer 1

은 표시된 경우 :before 의사 소자 절대적 레이아웃 유동 유입을 방지하기 위해 하나의 위치를 ​​원하는, 또는 0의 opacity에서 :hover 상태로부터 독립적으로 유사 요소를 생성하고 opacity 설정하려는 1 호이 잡힐 때.

레이아웃 중 :before이

ul > li:hover:before { 
    /* all the other styles */ 
    position: absolute; 
    left: 25px; 
} 

바이올린 흐름 유지 : http://jsfiddle.net/marionebl/UQAjh/1/

가 :hover 상태에 관계없이 :before 만들기

ul > li:before { 
    /* all the other styles */ 
    display: inline-block; 
    float: left; 
    opacity: 0; 
} 

ul > li:hover:before { 
    opacity: 1; 
} 

바이올린 :,164,118,