Question

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

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

它在Firefox中工作得很好，但我不明白为什么Safari将鼠标悬停在桌面上的方式与Firefox不同 - 每个：悬停图像大约1像素关闭，使其看起来像桌面上的单独图像在moused结束时实际上有点移动。有什么建议？？

Answer 1

我在:hover以外的元素上使用<a></a>伪类时遇到了麻烦。您可以使用（jquery / javascript）使用<div>和onmouseover事件更改所述onmouseout的类。

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

更简单，使用jquery .hover()

Answer 2

将此链接添加到您的css后重新定位链接：

a div {
    line-height: 0;
}

Answer 3

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

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

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

您的桌面图像将为空，您的物品将位于其上方。

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

4 个答案: