Question

使用我以前做过但有问题的方法。不确定它是精灵还是什么..基本上你有两个版本的图像保存到一个文件中，它们堆叠在一起，并在悬停时使用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;
}

Answer 1

在你所引用的示例网站中，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>

Answer 2

我以前从未见过这个，除了背景图片，但我不明白为什么不...它似乎你需要很多额外的CSS和额外的html让它工作而不是背景图像。

如前所述，如果没有在上下文中看到您的实际代码，很难看到问题，但根据我的看法，可能会出现一些潜在的错误：

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

<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即可完成所有这些操作。

CSS悬停图像替换

2 个答案: