css - 使用 CSS 的 anchor 小于图像的新型翻转？

Question

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

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

我想要背景图片，<img> , 当鼠标仅悬停在链接上时出现，<a> .换句话说，当链接部分悬停时，我希望它后面的图像出现(或改变状态)而不会变得“可点击”。我想只用 CSS 来完成。

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

我的解决方案是将 <a>和 <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 中也是如此。翻转闪烁，很像 Sprite 在 IE6 中所做的，并且链接在第一次甚至第二次尝试时并不总是可点击的。

有谁知道为什么 IE 让我为此感到难过？是否有一些修复程序可以使 IE 像其他浏览器一样呈现此 CSS？或者，如果我想出的整个方法都是废话，谁能想到一种更跨浏览器友好、更优雅的方式来使用 CSS 使此翻转工作？

我不是网页设计的新手，如果需要，我也可以处理 JS 和 PHP。用 CSS 完成这一切的想法很吸引我。预先感谢您的帮助!

Answer 1

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