html - 链接背景图像在加载之间消失

Question

#nav ul li a.jobs_mn {
    background: url(../images/jobup.png) #2d333e no-repeat 7% 50%;
}

#nav ul li a.jobs_mn:hover {
    background: url(../images/jobover.png) #fff no-repeat 7% 50%;
}

我将课程添加jobs_mn到链接中。当我单击链接时，图像会消失，直到加载下一页。它实际上正在加载一个 PHP 查询：

<a href="?news=1" class="jobs_mn">bla bla</a>

知道如何解决这个烦人的事情吗？

Answer 1

您的问题在于您正在更改:hover状态的背景。因为状态会在:hover变为时发生变化，:click并且用户通常会从链接中移出鼠标，所以您需要确保显示的是相同的图像。

该链接基本上有 4 种状态：之前（未点击）、悬停、活动、之后/点击。

将相同的图像添加background: url../images/jobover.png) #fff no-repeat 7% 50%到您希望它出现的每个状态。如果您希望在单击链接后出现相同的图像，它看起来像：

#nav ul li a.jobs_mn:hover:after {
background: url(../images/jobover.png) #fff no-repeat 7% 50%; }

虽然它有点多余并且我还没有真正遇到过这种情况，但这应该提供一个故障保护，以在用户在查询处理期间单击并移开鼠标后保持图像相同。