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

Question

我正在尝试制作一个导航菜单，其中更改了 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。

Answer 1

我找到了这两个问题的解决方案，我将其发布在这里供需要的人使用。

在我用

标签替换 标签后，几乎所有的故障都消失了，我使用 CSS 为其设置了背景。这也为我提供了更广泛的浏览器支持(包括 Firefox)。

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

关于html - css 上的奇怪故障悬停在链接上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35469793/