1

图像翻转，无 JavaScript，无链接，纯 CSS，代码验证和浏览器兼容。

大家好，我一直在 24 小时工作，想出这个相当简单的解决方案。我想知道是否一切都好，是否有改进的方法。它非常优雅，我们开始：

我只有一个图像“徽标”，但它会显示为 2 个不同的徽标，每个都具有翻转效果。我使用一个精灵（只有 1 个包含我的 4 个徽标的图像），我只是改变它的位置。

在这里，我将我的图像插入到一个 div 中

<div id="logo-rollover-1" class="logo-rollover">
    <img title="whatever" alt="whatever" src="path-to-your-image">
</div>

然后我在另一个 div 中插入相同的图像但具有不同的 id

<div id="logo-rollover-2" class="logo-rollover">
    <img title="whatever" alt="whatever" src="path-to-your-image">
</div>

现在我的CSS：

.logo-rollover {
    background: #ffd42a url('path-to-your-image');
    width: 230px;
    float: left;
    height: 130px;
    overflow: hidden;
    position: relative;
}

.logo-rollover img { width: 460px; height: 260px; }

.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }

#logo-rollover-1 { background-position: 0px -130px; }

#logo-rollover-2 { background-position: -230px -130px; }

#logo-rollover-2 img { right: 230px; position: relative; display: block; }

说明：当有人悬停图像时，它变得透明并显示背景女巫是相同的图像但位置不同。opacity: 0 用于 Firefox、Google 和 filter:alpha(opacity=0) 用于 Explorer。position: .logo-rollover 类的相对位置是为了兼容 IE6 和 IE7 的隐藏溢出。显示：块；被添加到 Opera 浏览器的 id img 中。

No Hack：没有链接时，不需要 href="#" 或 "javascript:void(0)"

优点：而不是请求 4 个（或更多）图像，只有 1 个图像（1 个图像精灵的总大小小于 4 个的总大小）。由于图像已经下载，翻转是即时的。没有破解，没有虚假链接，代码验证。为图像添加标题。唯一没有滚动的浏览器是 IE6，但网站没有损坏，徽标显示正确。有一个激活 IE6 悬停的技巧，但我没有打扰，因为 IE6 已经死了。

提示：在任何地方为您的图像使用相同的路径。我的意思是所有呼叫的“路径到你的图像”需要相同。因为浏览器缓存。

这是最好的优雅方式吗？这段代码可以改进吗？我希望它会对某人有所帮助，因为感谢其他用户在这里开发真的很痛苦，我在这里和那里发现了一些技巧并想出了这个。

评论赞赏。

4

2 回答 2

3

为什么不完全删除内部<img>并使用 CSS 背景创建徽标？

<a id="logo">Logo</a>

#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0; 
overflow:hidden; text-indent:-1000px; display:block; }

#logo:hover { background-position:0 -60px; }

解释：

<a>是 IE6 上唯一支持 :hover 伪选择器的元素。如果您想要悬停徽标的本机解决方案，则必须使用此标签。有些人有时会包装其他元素，例如：<a><div></div></a>通过使用 CSS 从 CSS 访问它来赋予 div 悬停属性a:hover div { }

overflow:hidden; and text-indent:-1000px;隐藏 div 内的文本。出于可访问性原因，将文本保留在内部是一种很好的做法。

background设置 div 的背景颜色，初始对齐为 0, 0

background-position执行实际技巧并移动图像 - 它在“视口”div内移动它，使图像的不同部分可见。

于 2011-05-25T09:51:19.413 回答
0

很好的描述！我看到了一个小的改进：将背景和无重复定义放在你的 .logo-rollover 类中以减少 css 代码（你只需要编写一次而不是两次）

于 2011-05-25T08:00:35.597 回答