Question

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

大家好，我一直在24小时工作，想出这个相当简单的解决方案。我想知道一切是否正常以及是否有改进的方法。这很优雅，我们走了：

我只有一个图像“Logo”，但它会显示为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; }

解释：当某人悬停在图像上时，它变得透明，并显示背景女巫是相同的图像，但具有不同的位置。不透明度：0表示Firefox，Google和过滤器：alpha（opacity = 0）表示资源管理器。位置：.logo-rollover类的相对性是为了兼容隐藏的溢出与IE6＆amp; IE7。显示：块;添加到Opera浏览器的id img中。

没有黑客：当没有链接时，不需要href =“＃”或“javascript：void（0）”

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

提示：在任何地方为您的图片使用相同的路径。我的意思是“通往你的形象之路”需要对所有通话都是一样的。因为浏览器缓存。

这是最优雅的方式吗？这段代码可以改进吗？我希望它会帮助某人，因为这是一个真正的痛苦，感谢别人用户在这里我发现了一些技巧，并且想出了这个。

评论赞赏。

Answer 1

为什么不完全删除内部<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>通过使用a:hover div { }

从CSS访问div来提供div hover属性

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

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

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

Answer 2

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

图像翻转，没有Javascript，没有链接，纯CSS，代码验证器和浏览器兼容

2 个答案: