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

我找到了这两个问题的解决方案，我在这里发布给需要它的人。

几乎所有的故障，除了图像消失一秒之外的故障，在我更换＆lt; img＆gt;之后都消失了。标签包含＆lt; div＆gt;标签，我使用CSS设置背景。这也给了我更广泛的浏览器支持（包括Firefox）。

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

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

1 个答案: