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

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查询actualy：

<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%; } 

虽然这是一个有点冗余，而且我还没有真正遇到这种情况，这应该提供了一种故障安全机制，在用户单击并在查询处理过程中将鼠标移开后保持图像不变。