Question

我使用Jquery设置了悬停效果，可以改变悬停元素的不透明度。它适用于所有最近的浏览器，除了Chrome，它会改变身体元素的背景。

我的工作环境如下：Google Chrome v18.0.1025.162 / Windows 7 x64。

这有什么解决方法吗？提前谢谢！

Answer 1

我经历过非常接近的事情，在我的情况下，改变悬停时的不透明度导致前景图像元素摆动。看起来特定原因与使用变换（我正在使用）有关。修复很简单 - 在img元素上我添加了：

-webkit-backface-visibility: hidden;

没有更多的摆动。我不熟悉它实际上做了什么，但它没有任何奇怪的副作用并修复了问题。

我还看到了一个我没有尝试的替代解决方案 - 显然其他人已经体验过这个并通过旋转修复它：

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

Answer 2

我终于可以在Chrome中看到问题了。这是非常微妙的，所以除非你确切地知道你在寻找什么，否则很容易错过。

我还在处理剩下的问题，但当我将鼠标悬停在中间的“stiati ca”标志上时，我可以看到背景偏移到图像的左侧。

这个问题似乎与CSS的background-size部分有关。如果我删除background-size行，问题就会完全消失。我并不是说这是问题的真正原因，但这是第一个线索。我在调查的这一点上的猜测（稍后将在答案中提到）是悬停中的某些东西导致文档大小改变，导致背景重新缩放并因此转移：

body {
    background: black url('../img/bck.jpg') left top fixed no-repeat;
    moz-background-size: cover;
    background-size: cover;
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale')";
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale');
}

进一步追求这一点，我发现如果我从这个CSS块中注释掉文本缩进行：

a#stiati_ca{
    display: block; width: 124px; height: 124px;
    xtext-indent: -9999em;
    background: url('../img/stiati_ca.png') no-repeat;
    margin: 88px auto 0;
}

然后，悬停在徽标上的问题完全消失了。当然，你的链接中有一些文字显示我猜你不想看到，但你可以修复HTML以不同的方式工作。我建议在其中使用带有固定大小div的链接（链接中没有文本），然后在div上设置背景图像，而不是在链接本身上。无论如何，这是一种更安全的跨浏览器方式，您不需要文本缩进线，并且背景移位问题应该消除徽标图像。如果您确实需要链接中的文本但不希望它显示，则将其放在一个范围内，并使display: none使该范围不可见。无论哪种方式，您都不应在<a>上设置背景图像，而应在链接内具有适当大小的元素上设置背景图像。这应该会更好。

我还没弄清楚为什么前四张图片会出现同样的问题。如果我想出那个，我会添加到我的帖子中。

当悬停时不透明度发生变化时，Google Chrome中的背景转换

2 个答案: