호버시 배경 변경 깜박임

여기에 www.startingcanvas.com을 코딩하는 사이트가 있습니다. 거기에있는 아이콘에 배경을 추가했습니다. 아이콘을 가리키면 배경이 바뀝니다.호버시 배경 변경 깜박임

각 아이콘의 첫 번째 마우스를 가리면 배경이 깜박입니다. 이미지가 로딩 중이라고 생각했습니다.

그러나 나는 방법 중 몇 이미지가 미리로드하려고 :

디스플레이에 넣어 : 없음 DIV :

<div style="display:none"> 
    <img src="images/myimage1.jpg" /> 
    <img src="images/myimage2.jpg" /> 
    <!-- etc... --> 
</div>

를 그리고 자바 스크립트와 하나

for(var i = 0; i < to.icons.length; i++){ 
    new Image().src = to.icons[i].bg; 
    //console.log(to.icons[i].bg); 
}

솔루션없이 , 여기에 내 자바 스크립트 코드가 어떤 아이디어가 있으십니까 :

출처

2013-10-19 Jepser Bernardino

모든 이미지와 호버 (hover) 상태가 포함 된 CSS 스프라이트 이미지를 만들어야합니다. 예를 들어 아이콘이 50x50 픽셀이고 아이콘 바로 아래에 '마우스를 올려 놓기'아이콘이있는 경우 - 요소의 마우스를 올려 놓으면 'hover'img를 표시하는 배경 위치가 '푸시'됩니다.

#icon-one { 
    background: url('<Sprite url>'); 
} 

#icon-one:hover { 
    background-position: <x position>0px <y position>-50px; 
}

모든 이미지를 하나의 파일로 묶으면 http 요청에 저장됩니다. Chris Coyier가 CSS Sprites에 대한 이전 기사를 작성했습니다. http://css-tricks.com/css-sprites/

출처

2013-10-19 20:30:56 bmullan91

호버시 배경 변경 깜박임

답변

관련 문제