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

将其添加到第1666行的CSS文件

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

删除它，它应该没问题

使CSS图像翻转出现（与幻灯片放入）

3 个答案: