代码之家 › 专栏 › 技术社区 › datasn.io

扩展css精灵无法使用:悬停?

css-sprites xhtml css html

4

datasn.io · 技术社区 · 17 年前

我刚刚遇到了这个 article css精灵的扩展,使前景图像的精灵技巧。我 tried http://www.kavoir.com/examples/jenny-css-sprites/menu.html

试图询问作者,但她删除了我的评论。

更新:谢谢你的回答,但是:悬停是为了,所以我相信所有的IE浏览器都应该有效果。因此,问题很可能与clip属性有关。

5 回复 | 直到 17 年前

1

4

annakata 17 年前

所描述的整个技术对我来说似乎有问题。

出于辅助功能的目的,不能将替代文本附加到div
除非选择了打印背景图像的客户端选项,否则图像不会在打印输出上打印出来(这对徽标和菜单等不利)
对于页面中的图像(实际上不是背景图像),在CSS中隐藏图像在语义上似乎不好。

关于1,考虑到这些是背景图像,而不是语义图像本身,我认为正确的方法是将文本直接放在标记中并用CSS隐藏,而不是相反。

数字2是有效的,但不是世界末日。对3采取行动是一种滥用imho-如果用户不想打印背景图像,你为什么要强制这样做?这又回到了语义解释。

第四,我完全同意,但是如果你只是把图像隐藏在一个精灵的图像中,你会得到什么?你可以对此进行辩论,但是 <img> 具有用URI表示资源的语义含义,因此URI应该是不同的,不依赖于解释的CSS。查看/复制/保存图像将受到此问题的负面影响。

在我的FF中,它的反应似乎也很慢(不可否认,它会受到标签滥用的影响),我想剪辑数学需要付出相当大的努力。

长话短说,我认为现有的背景图像/位置技术是优越的。

2

4

jennyfofenny 17 年前

好的,以下是我的研究发现的(如果我错了,请纠正我): IE支持:hover,但它显然不会将其应用于子元素。

因此,我使用溢出创建了一个变通方法:使用当前标记隐藏和边距。我猜想您仍然可以使用clip属性,但它可能需要另一个元素(尽管可能不是)。解决方案已经成熟 here

另外,我想在annakata的演讲中指出,菜单按钮和徽标在历史上不是背景图像,并且已经打印在打印输出上,因此css spriting已经改变了这种行为(有利于性能)。

3

1

VonC 17 年前

:hover 不应该在旧的IE上工作(IE7应该支持这个伪类)。

这篇文章“ IE CSS Hover Fix “列出了一些用于制作的技术正确运行,如IE专有的表达式函数或HTC(HTML组件)。

4

1

Kobi 17 年前

实际上,IE支持:悬停链接。我相信这里的问题是使用“Clip”css属性。

5

0

bchhun 17 年前

以下是我通常如何在A标记中没有IMG子标记的情况下制作CSS精灵:

HTML:

<div class="menu">
    <a href="#">foo</a>
    <a href="#">foo</a>
</div>

/* you need to specify its height and width so that they fit with the part of the sprite you want to show */
.menu a{display:block;width: 100px; height: 100px; float:left; margin-right: 10px; text-indent: -9999px;}
/* the background-position is set to top. */
.menu a{background: url(../images/whatever.png) no-repeat top center;} 
/* the background-position is set to bottom. */
.menu a:hover{background-position: bottom center;}

您的whatever.png文件在两种状态下的高度均为200px。

就这样