내 페이지에서 사용중인 코드는 다음과 같습니다.
<a href="#" class="bac" data-role="none" style="color:#fff;">
<strong>Anúnciese gratis</strong>
</a>
.bac{
background:url("http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png");
background-repeat:no-repeat;
display: block;
font:15px/18px Arial;
height: 22px;
padding: 6px 18px 4px 4px;
text-decoration: none;
margin-right:-4px;
}
.bac:hover{
background-attachment:scroll;
background-position:0px -35px;
background-image:url("http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png");
background-repeat:no-repeat;
height:22px;
padding:6px 18px 4px 4px;
}
다음은 데모 http://jsfiddle.net/Lc4Ky/1/ (Google 크롬 브라우저에서 열기)입니다 .Google 크롬에서 이것을 열면 마우스를 올리면 이미지가 잠시 꺼진 다음 마우스 오버 효과가 표시됩니다. 새로 고칠 때마다 처음으로 만 꺼집니다. 하지만이게 안정적이어야하는데 이에 대한 해결책이 있습니까?
잘 모르겠지만 신청하면 안될 것 같아요
background-image:url("http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png");
다시 hover에서, 그래서 당신의 hover 클래스는
.bac:hover{
background-position:0px -35px;
}
편집 : 또한 background-imagehover에서 다시 적용 하고 Google take는 새로운 이미지와 같이 처음으로로드되는 데 시간이 걸리기 때문에 꺼지고 있지만 그 후에는 Google이 캐시에서 선택하고 페이지를 다시로드 할 때까지 다시 꺼지지 않습니다. 이미지가 같은 도메인에 있으면 이미지의 전체 URL을 제공하지 말고 http://wstation.inmomundo.com/static02/costarica/sprites_botones1.pngimages / sprites_botones1.png와 같은 이미지의 상대 경로를 제공하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다