CSS悬停图像替换答案

【问题标题】：CSS hover image replacementCSS悬停图像替换
【发布时间】：2011-04-10 20:56:58
【问题描述】：

使用我以前做过但有问题的方法。不确定它是精灵还是什么。基本上，您将图像的两个版本保存到一个文件中，它们彼此堆叠在一起，并在悬停时使用 CSS 调整边距。这是一个成功运行的示例：http://minimalpluscreative.com

尝试在这里做同样的事情，但遇到了溢出问题：隐藏；不工作。而是显示完整（双）图像。这是它的样子：http://cl.ly/023p1I1D1W0W3a1T1q1R 它应该只是带有溢出的图像的上半部分：隐藏；阻止另一半出现。

帮助？我确定某种语法错误......

HTML：

    <div id="work" class="sub">
        <h3>MUSIC VIDEOS</h3>
        <img id="show_fire" class="thumbnail sprite" src="images/daniel_gomes_soundoffire_sprite.png" />
    </div>

CSS：

.sprite {
        width:140px; 
        height:61px; 
        overflow:hidden;
}
.sprite:hover {
        margin-top:-61px;
}

【问题讨论】：

使用背景图像位置通常更容易实现精灵。请参阅css-tricks.com/css-sprites 了解一个很好的例子。
@Steve Jorgensen - 考虑使用 css 背景，但这些是简单的图像缩略图，我认为这是不必要的工作。如果标记不能与一起使用，那么我会让它们
带有背景。但从理论上讲，没有理由不这样做。这与示例 minimalpluscreative.com 的标记相同
你能提供精灵图片的链接吗？
我认为操作图像标签的边距至少与更改位置背景图像一样多。至少，还有更多关于如何使用背景图像位置的示例。

标签： css image hover sprite replace

【解决方案1】：

我以前从未见过这样做过，除了背景图片，但我不明白为什么不这样做……看起来你需要很多额外的 css 和额外的 html 才能让它工作而不是背景图片。

如前所述，如果不查看上下文中的实际代码，很难发现问题，但根据我所见，可能存在一些潜在问题：

您需要将图像包装在一个包含元素中，并为其分配宽度、高度和溢出。隐藏溢出将隐藏 div 包含的边界之外的内容。图片元素是图片，它不包含图片，所以将其设置为 overflow:hidden 不会隐藏任何东西，并且为其指定宽度只会调整它的大小，而不是“裁剪” “它（这是你想要的效果）。所以你需要这样的东西：

<div id="work" class="sub">
    <h3>MUSIC VIDEOS</h3>
    <a class="sprite" href="#">
        <img id="show_fire" class="thumbnail" src="images/daniel_gomes_soundoffire_sprite.png" />
    </a>
</div>

使用这个 css：

.sprite {
    width:140px; 
    height:61px; 
    overflow:hidden;
}
.sprite img {
    margin-top: 0;
}
.sprite:hover img {
    margin-top: -61px;
}

我建议你使用 'a' 作为包含元素，因为并非所有浏览器都能识别除锚标签之外的标签上的悬停伪类。

我知道您认为使用图像而不是背景图像更简单，但是使用背景图像，您只需一个元素和更少的 css 即可完成所有这一切。

【讨论】：

你说得对。已经开始改变方法了。感谢您的深入回答。
关于使用锚确保悬停伪类被识别的小而快的其他想法：您建议使用什么标记？我认为具有相关背景图像和 .sprite:hover 类的
可以工作（并且确实），但似乎与您的建议相冲突。这些是技术链接，但仅用于触发 JavaScript 函数。
如果您担心 IE6 的全部功能，您只需要担心它。 IE6 不能识别除锚标记以外的任何东西上的 ":hover"。我相信所有其他相关的浏览器都会。从语义上讲，div 可能是更好的选择，因为它并不能真正起到锚点的作用。但是使用a标签只是保持最大跨浏览器兼容性的一种快速而肮脏的方式。
太棒了，我很高兴不关心 IE6。感谢您的指导。

【解决方案2】：

在您引用的示例站点中，overflow:hidden 属性设置在外部“div#a”上代码中的“div#work”应该将其溢出设置为隐藏。

因此，当您更改图像的边距时，它将在外部 div 的框架内移动。

此外，我必须在悬停声明中添加标签名称。

<html>
<head>
<style>
#work{  
        position:relative;
        overflow:hidden;
        width:140px;
        height:61px; 
}
div.sprite {
        margin-top:0;    
}

div.sprite:hover {
        margin-top:-61px;
}
/* instead of an image */
.sprite div{
 height:61px;
}
.red {background:red}
.blue {background:blue}

</style>
</head>
<body>
<div id="work">
 <div class="sprite">
  <div class="red">a</div>
  <div class="blue">b</div>
 </div>
</div>
</body>

【讨论】：

我明白你在说什么。天哪，我马虎了。我想我最终会使用 background-image 属性，因为#work div 中有几个图像。感谢您指出错误。