使用CSS的锚点小于图像的新型滚动更新

Question

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

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

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

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

我的解决方案是将<a>和<img>放在父<li>中（因为这本质上是"菜单"或网站导航的一部分），然后使用相邻的同级选择器 （+） 在<a>悬停时更改<img>。最基本的是，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做这一切的想法吸引了我。提前感谢您的帮助！

Answer 1

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

Answer 2

这样

的东西会起作用吗？

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

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

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