css - 使 CSS 图像翻转出现（相对于滑入）

Question

不知道发生了什么，但我怀疑 jquery 正在工作......我在悬停时使用图像精灵，但图像从右侧滑入而不是出现在适当的位置。在http://www.maidinhoboken.com/testpage/看到蓝色气泡变成红色气泡

我如何让它出现在适当的位置？

HTML：

<a href="#" class="rollover" title=""><span class="displace">Test</span></a>

CSS：

a.rollover {
display: block;
width: 190px;
height: 190px;
text-decoration: none;
background: url(images/bubble_rollover1.png);
}

a.rollover:hover {
background-position: -190px 0;
}

.displace {
position: absolute;
left: -5000px;
}

Answer 1

将此添加到您的 CSS 文件中的第 1666 行

a.rollover, a.rollover:hover {
    transition: none; 
    -moz-transition: none; 
    -webkit-transition: none; 
    -o-transition: none; 
    -ms-transition: none; 
}

您在样式表的某处设置了一个过渡集，该过渡集正在被继承。

Answer 2

你有 CSS 过渡，它使图像滚动而不是出现。将transition:none规则放入 a.rollover：

a.rollover {
  display: block;
  width: 190px;
  height: 190px;
  text-decoration: none;
  background: url(images/bubble_rollover1.png);

  /* add this */
  transition: none;
  -moz-transition: none; /* Firefox 4 */
  -webkit-transition: none; /* Safari and Chrome */
  -o-transition: none; /* Opera */
}

Answer 3

您在此处的链接上设置了转换

a, a:visited {
    color: #3FB6D7;
    text-decoration: none;
    transition: all 0.2s ease-in-out 0s;
}

删除它应该没问题