css上的奇怪故障悬停在链接上

Posted 2023-05-08

技术标签:

【中文标题】css上的奇怪故障悬停在链接上【英文标题】：Weird glitches on css hover over link 【发布时间】：2016-05-29 22:19:12 【问题描述】：

我正在尝试制作一个导航菜单，其中 html 中的链接之后的图像（或所见的链接之前的图像，因为我正在颠倒顺序）被更改。这是我的代码：

<div class="submenu">
    <a href="cat4.php" class="text" id="cat4">Category 4</a>
    <a href="cat4.php"><img src="image/submenu/cat4_transp.png" id="cat4" /></a>
    <a href="cat3.php" class="text" id="cat3">Category 3</a>
    <a href="cat3.php"><img src="image/submenu/cat3_transp.png" id="cat3" /></a>
    <a href="cat2.php" class="text" id="cat2">Category 2</a>
    <a href="cat2.php"><img src="image/submenu/cat2_transp.png" id="cat2" /></a>
    <a href="cat1.php" class="text" id="cat1">Category 1</a>
    <a href="cat1.php"><img src="image/submenu/cat1_transp.png" id="cat1"  /></a>
</div>

这里是 CSS：

div.submenu 
    width: 100%;
    direction: rtl;
    unicode-bidi: isolate;
    text-align: center;
    border-bottom: 3.5px solid #AB0809;
    font: 20px verdana;

div.submenu a  color: black;  display: inline-block; 
div.submenu a.text  padding: 10px; padding-bottom: 2px; position: relative; bottom: 10px; 
img#cat1:hover, a#cat1:hover ~ a img#cat1  content:url("../image/submenu/cat1_painted.png"); 
img#cat2:hover, a#cat2:hover ~ a img#cat2  content:url("../image/submenu/cat2_painted.png"); 
img#cat3:hover, a#cat3:hover ~ a img#cat3  content:url("../image/submenu/cat3_painted.png"); 
img#cat4:hover, a#cat4:hover ~ a img#cat4  content:url("../image/submenu/cat4_painted.png");

有问题的图片不大 - 30x40 像素，每个大约 3KB。以下是我在视频格式中遇到的一些故障：

Glitch 1

Glitch 2

第一个发生在我在 localhost / XAMPP 上运行站点时（您可以看到第三张图片出现故障，它会移动整行），第二个发生在我免费上传站点时托管（图像消失一秒钟）。

我很困惑，希望你能帮助我。我正在使用最新版本的 Chrome / Windows 7 x64。

【问题讨论】：

您是否尝试过明确指定 img 大小？似乎浏览器正在删除一个图像然后插入另一个图像，这会改变内容流。如果给定的元素是给定的宽度是明确的，它应该减轻这种情况。 【参考方案1】：

我找到了解决这两个问题的方法，并将其发布在此处以供任何需要的人使用。

几乎所有的故障，除了图像消失一秒钟的故障，在我用

标签替换标签后都消失了，我使用 CSS 设置了背景。这也给了我更广泛的浏览器支持（包括 Firefox）。

我通过预加载所需的图像解决了图像消失的问题（我在页面顶部设置了一个虚拟 div 并将所有图像作为背景）。这样一来，需要的图片已经加载完毕，不需要再次加载，所以会有延迟。

【讨论】：