Question

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

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

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

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

我的解决方案是将<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中也是如此。翻转闪烁，就像IE6中的精灵一样，并且链接在第一次尝试或第二次尝试时并不总是可点击。

有谁知道为什么IE会让我感到悲伤？是否有一些修复使IE像其他浏览器一样渲染这个CSS？或者，如果我提出的整个方法都是垃圾，那么有没有人能想到一种更加跨浏览器友好，优雅的方式来使用CSS进行翻转？

我不是网页设计的新手，如果必须的话，我也可以解决JS和PHP问题。用CSS做这一切的想法只是吸引我。在此先感谢您的帮助！

Answer 1

这样的事情会起作用吗？

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

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

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

Answer 2

引起闪烁是因为IE在没有内容时似乎不尊重链接的z-index值。但是，如果您将链接的背景（例如 #craftsLink a ）设置为透明的png图像，则似乎可以解决问题＆amp;该网站适用于IE7 +。

使用CSS，锚点小于图像的新型翻转？

2 个答案: