1

Here is the code which i am using on my page

HTML

 <a href="#" class="bac" data-role="none" style="color:#fff;">
  <strong>An&uacute;nciese gratis</strong>
 </a>

CSS

.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;

}

Here is the demo http://jsfiddle.net/Lc4Ky/1/ (open in google chrome browser) When i open this in google chrome, on hover the image is going off for a second then its showing hover effect.The image is going off only first time on each refresh. But i want this should be stable.Is there any solution for this?

mplungjan
  • 169,008
  • 28
  • 173
  • 236
user3560322
  • 55
  • 8
  • possible duplicate of [CSS: Hover State images cache](http://stackoverflow.com/questions/4333695/css-hover-state-images-cache) – Liam Apr 22 '14 at 12:15

2 Answers2

2

you don't need to redefine everything in the :hover-block. just change the background-position:

.bac:hover{
    background-position:0px -35px;  
}

see it working on jsfiddle

oezi
  • 51,017
  • 10
  • 98
  • 115
0

I am not sure, but i think you should not apply

background-image:url("http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png");

again on hover, so your hover class should be

 .bac:hover{
background-position:0px -35px; 
}

Edit: Also it is going off because you apply background-image again in hover and google take is as brand new image and take some time to load first time, but after that google pick it from cache and it never goes off again until you reload the page, if your image is in same domain then don't give the full url of image http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png, give the relative path of image like images/sprites_botones1.png

Vijay Singh Rana
  • 1,060
  • 14
  • 32