4

我一直在为我的网站制作链接翻转效果，以实现以下目标：

┌────────────────────────────┐
│  ┌──────────────────┐      │
│  │ <a>              │      │
│  └──────────────────┘      │
│                            │
│                 <img>      │
└────────────────────────────┘

<img>我希望当鼠标仅悬停在链接上时显示背景图像<a>。换句话说，当链接部分悬停时，我希望它后面的图像出现（或更改状态）而不会变成“可点击”。我想只用CSS来做。

我没有使用常见的 CSS 背景/精灵方法，因为 A）无论我如何标记它，如果它位于标签<img>内的任何位置<a>，整个图像一旦显示就变得“可点击”，并且 B）我想要使用更大、质量更好的图像，并将它们包含在 HTML 中，避免了使用 Javascript 或浏览器黑客来预加载它们。

我的解决方案是将<a>and放在<img>父<li>级中（因为这本质上是“菜单”或站点导航的一部分），然后在鼠标悬停<img>时使用相邻的同级选择器 (+) 进行更改。<a>最基本的，CSS 看起来像这样：

li {
   size and position declarations; /*The size is the same as the contained image.*/
}

li a {
   absolute size and position declarations for the link area;
   z-index: 2; /*I use the z index to make sure the link stays above the image.*/
}

li img {
   absolute size and position declarations for the image;
   z-index: 1;
   display: none;

li a:hover + img {
   display: block;
}

基本的 HTML 如下所示：

<ul>
   <li><a href="page.htm"> </a><img src="image.jpg"></li>
   <li>...
</ul>

如果你想看到它的实际效果，我在www.joshuakirby.net/test上提供了一个测试版本（请注意——我是自学成才的，我承认我不是编码专家）。它在我尝试过的所有主要浏览器中都很好用，除了 IE。我还没有让它在任何 IE 版本中正常工作，即使在 IE9 中也是如此。翻转闪烁，就像在 IE6 中的精灵一样，并且在第一次甚至第二次尝试时链接并不总是可点击的。

有谁知道为什么 IE 让我为此感到悲伤？是否有一些修复可以让 IE 像其他浏览器一样渲染这个 CSS？或者，如果我想出的整个方法都是废话，那么任何人都可以想出一种更跨浏览器友好、更优雅的方式来使用 CSS 进行翻转工作吗？

我不是网页设计的新手，如果需要，我也可以处理 JS 和 PHP。用 CSS 来做这一切的想法吸引了我。在此先感谢您的帮助！

4

2 回答 2

1

像这样的东西会起作用吗？

http://jsfiddle.net/lazerblade01/CAhuy/

显然，您可以将图像作为背景图像添加到 div 而不是颜色。

编辑：刚刚在 IE9 中测试（我可以访问的唯一版本的 IE 无需启动另一台计算机）。背景颜色似乎没有闪烁。让我知道它是否适用于图像。

于 2012-04-16T02:29:43.563 回答
1

闪烁是因为 IE 在没有内容时似乎不尊重链接的 z-index 值。但是，如果您将链接的背景（例如#craftsLink a）设置为透明的 png 图像，它似乎可以解决问题并且该网站可以在 IE7+ 中运行。

于 2012-04-16T03:18:15.063 回答