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

2023年10月9日 178次阅读

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

┌────────────────────────────┐
│  ┌──────────────────┐      │
│  │ <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做这一切的想法只是吸引我.在此先感谢您的帮助！

最佳答案 引起闪烁是因为IE在没有内容时似乎不尊重链接的z-index值.但是,如果您将链接的背景(例如#craftsLink a)设置为透明的png图像,它似乎可以解决问题&该网站适用于IE7.

点赞