div：悬停位置在不同浏览器中以不同方式交换图像

Question

我使用 div:hover CSS 规则来实现所需的效果 - 当鼠标悬停在导航图像上时图像“交换”：www.scottmccarthydesign.com/dev.index.html

然而，我在这里的设置实际上并不是“交换”。主导航图像是整个桌面的扁平 jpeg（为了更快加载），并且桌面上的每个项目上方都有空的 div，以使用链接映射图像。当鼠标悬停在这些空 div 上时，div:hover 规则会使用 .png 填充 div，该 .png 会精确放置在主桌面图像上，以提供图像交换的效果。

它在 Firefox 中运行良好，但我不明白为什么 Safari 将 :hover 图像定位在桌面上与 Firefox 不同 - 每个 :hover 图像大约有 1 像素的偏差，使得桌面上的单独图像看起来实际上正在移动鼠标悬停时会有点。有什么建议吗？？

Answer 1

我在 以外的元素上使用 :hover 伪类时遇到了问题。您可以使用 (jquery/javascript) 使用 onmouseover 和 onmouseout 事件来更改所述

的类。

使用 onmouseover 添加一个定义特定背景图像的类。使用 onmouseout 删除该类。

更简单的是，使用 jquery .hover()

Answer 2

将其添加到 css 后重新定位链接：

a div {
    line-height: 0;
}

Answer 3

我以前遇到过这个问题，发现它与图像的大小有关。当图像的某一维度的像素大小为奇数时，Firefox 和 Chrome/Safari 执行的计算（特别是使用 center 时）会略有不同。本质上，它与子像素舍入有关。

只需在具有奇数长度的轴上向图像添加或减去一个像素，使它们成为偶数（即，将其变为 100x124，而不是 100x123），您就应该是黄金了。

Answer 4

不需要使用 Javascript，这当然可以仅使用 CSS 来实现。在我看来，最好的选择是使用本文中讨论的有关 CSS Sprites 的技术： http://www .alistapart.com/articles/sprites。

本质上，对于桌面上的每一项，将悬停图像和非悬停图像放置在同一张图像中，一个放在另一个图像的顶部，以便顶部区域具有非悬停状态，底部区域具有悬停状态。您的代码可能看起来像这样修改：

div#keyboard2 {
    position: absolute;
    left: 89px;
    top: 256px;
    width: 67px;
    height: 160px;
    background: url(../images/keyboard.png) 0 0 no-repeat;
}
#keyboard2:hover { background-position: 0 100%; }

您的桌面图像将是空的，并且您的项目将位于其顶部。