CSS 悬停图像替换

发布于 2024-10-31 14:28:57 字数 805 浏览 0 评论 0原文

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

原文

Using a method I've done before but having issues. Not sure if it's a sprite or what.. Basically you have two versions of an image saved into one file with them stacked on top of each other and use CSS to adjust the margins when hovering. Here's an example of it working successfully: http://minimalpluscreative.com

Trying to do the same thing here, but running into issues with overflow:hidden; not working. Instead, the the full (double) image is shown. Here's what it looks like: http://cl.ly/023p1I1D1W0W3a1T1q1R It should be just the top half of the image with overflow:hidden; preventing the other half from showing.

Help? Some kind of syntax error I'm sure...

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦醒灬来后我 2024-11-07 14:28:58

除了背景图像之外，我以前从未见过这样做，但我不明白为什么不这样做……看起来你需要大量额外的 css 和额外的 html 才能使其正常工作，而不是背景图像。

正如前面所说，如果没有在上下文中查看实际代码，就很难发现问题，但根据我所看到的，可能存在一些潜在的错误：

您需要将图像包装在包含元素中，并分配宽度、高度和溢出。隐藏溢出将隐藏 div包含边界之外的内容。图像元素是图像，它不包含图像，因此将其设置为溢出：隐藏不会隐藏andything，并且为其分配宽度只会调整其大小，而不是“裁剪” “它（这就是你想要的效果）。因此，您需要类似的内容：

<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 即可完成所有这一切。

I've never seen this done before except with background images, but I don't see why not… it just seems like you need a lot of extra css, and extra html to get it to work as opposed to a background image.

As was said earlier, it's hard to see the problem without seeing your actual code in context, but based on what I see, there could be a few potential things wrong:

You need to wrap the image in a containing element, and assign the width, height and overflow to that. Hidden overflow will hide what's outside of the boundaries that div contains. The image element is the image, it doesn't contain the image, so setting it to overflow:hidden isn't going to hide andything, and assigning it a width will just resize it, not "crop" it (which is the effect you're going for). So you'd need something like:

<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>

with this css:

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

I suggest you use 'a' as the containing element, as not all browsers will recognize the hover pseudo-class on tags other than anchor tags.

I know you think using an image instead of a background image is simpler, but using background images, you can accomplish all this with only one element and less css.

回复收藏 0 原文

七颜 2024-11-07 14:28:58

在您引用的示例站点中，溢出：隐藏属性设置在外部“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>

In the example site you refer to, the overflow:hidden property is set on the outer 'div#a'
'div#work' in your code should have it's overflow set to hidden.

Thus when you change the margin on your image it will move within the frame of your outer div.

Additionally I had to add a tag name to the hover declaration.

<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>

回复收藏 0 原文

~没有更多了~