css - :hover not moving file 上的 IE8 背景位置

Question

当我将鼠标悬停在图像上时，我正在使用更改图像的背景位置方法。这对我来说在 FF、Chrome 和 Safari 中工作正常，但在 IE8 中却不行。背景图像是包含 alpha 透明度的 .png。我已经通过 W3C 验证器运行我的代码并且它是有效的，所以我不应该进入兼容模式。

这是相关的 html 代码片段:

<div id="main-nav">
<div id="texas">
  <a href="texas.html"><span>texas</span></a>
  <h2>texas</h2>
</div>
<div id="washington">
  <a href="washington.html"><span>washington</span></a> 
  <h2>washington</h2>
</div>
</div>

和相关的CSS:

#main-nav {
  width: 844px;
  height: 400px;
  margin: 40px auto; 
  position: relative;
}

#texas, #washington { 
  position: absolute; 
  height: 500px; 
  width: 196px;
}

#texas a {
  background-image: url("pics/texas.png"); 
}

#washington a {
  background-image: url("pics/washington.png");
}

#texas a, #washington a { 
  height: 400px; 
  width: 196px;
  display: block;
}

#texas a:hover, #washington a:hover { 
  background-position: 196 0; 
}

帮忙吗？

Answer 1

我遇到了类似的问题，其中 background-position 悬停时更改的 css 翻转不起作用，仅在 IE8 中。它们非常零星 - 有时一个会关闭，但随后会停留在悬停状态一段时间，直到另一个最终触发。

我发现通过从任何元素的父元素的 css 中删除任何特定于 IE 的透明度过滤器 filter: alpha(opacity=100);，问题得到解决。