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;

}

以下是演示http://jsfiddle.net/Lc4Ky/1/（在Google Chrome浏览器中打开）当我在谷歌浏览器中打开它时，在悬停时图像将关闭一秒然后显示悬停效果。图像仅在每次刷新时第一次关闭。但我希望这应该是稳定的。对此有任何解决方案吗？

Answer 1

您无需重新定义:hover - 块中的所有内容。只需更改background-position：

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

see it working on jsfiddle

Answer 2

我不确定，但我认为你不应该申请

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

再次悬停，所以你的悬停类应该是

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

修改此外它还会因为您在悬停时再次应用background-image而谷歌拍摄为全新图像并需要一段时间才能加载第一次，但之后谷歌选择它来自缓存并且在你重新加载页面之前它永远不会再次出现，如果你的图像在同一个域中，那么就不要给出图像http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png的完整URL，给出图像的相对路径，如images / sprites_botones1 .PNG

如何在悬停时保持图像不变

HTML

CSS

2 个答案: