Question

我有一个相当不寻常的问题。这很难解释，所以这是address你可以看一看（网站仍在开发中，不用担心PHP错误）。

问题如下 - 侧边栏菜单（图标，在右侧， Kategorije 下方）是动态创建的，每个 li 都有针对图标的span标记（用作背景）图片）。这是有效的，除了第一个（ aksesoari ）。而且这个也有效，但只有50％的时间 - 当它处于悬停状态时它正在工作。我尝试了一切，但互联网小鬼们正在乱搞我。有人能看出问题出在哪里（问题是在所有浏览器中获取）？

这是该部分的CSS代码（侧边栏菜单）：

span[role=kategorija]{width: 24px;height: 24px; display: inline-block;position: absolute; top: 0px; left: -30px}

.kategorija_aksesoari {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0 0px}
.kategorija_izbor li a:hover .kategorija_aksesoari {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0 -24px}
.kategorija_auto_moto{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -29px 0px}
.kategorija_izbor li a:hover .kategorija_auto_moto {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -29px -24px}
.kategorija_casopisi{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -58px 0px}
.kategorija_izbor li a:hover .kategorija_casopisi {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -58px -24px}
.kategorija_filatelija{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -87px 0px}
.kategorija_izbor li a:hover .kategorija_filatelija {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -87px -24px}
.kategorija_knjige{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px 0px}
.kategorija_izbor li a:hover .kategorija_knjige {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px -24px}
.kategorija_kolekcionarstvo{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0px -53px}
.kategorija_izbor li a:hover .kategorija_kolekcionarstvo {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0px -77px}
.kategorija_masine_alati{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -28px -53px}
.kategorija_izbor li a:hover .kategorija_masine_alati {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -28px -77px}
.kategorija_muzika_filmovi{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -57px -53px}
.kategorija_izbor li a:hover .kategorija_muzika_filmovi {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -57px -77px}
.kategorija_numizmatika{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -87px -53px}
.kategorija_izbor li a:hover .kategorija_numizmatika {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -87px -77px}
.kategorija_ostalo{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px -53px}
.kategorija_izbor li a:hover .kategorija_ostalo {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px -77px}
.kategorija_racunari_oprema{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0px -106px}
.kategorija_izbor li a:hover .kategorija_racunari_oprema {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0px -130px}
.kategorija_sportska_oprema{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -29px -106px}
.kategorija_izbor li a:hover .kategorija_sportska_oprema {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -29px -130px}
.kategorija_tehnika{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -58px -106px}
.kategorija_izbor li a:hover .kategorija_tehnika {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -58px -130px}
.kategorija_telefoni{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -86px -106px}
.kategorija_izbor li a:hover .kategorija_telefoni {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -86px -130px}
.kategorija_kuca_dvoriste{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px -106px}
.kategorija_izbor li a:hover .kategorija_kuca_dvoriste {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px -130px}
.kategorija_nekretnine{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -145px 0px}
.kategorija_izbor li a:hover .kategorija_nekretnine {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -145px -24px}

Answer 1

正如其他人所建议的那样，问题不是你需要将背景图像应用到非悬停状态......这已经完成了。

这里的线索是非悬停状态的声明是背景图像列表中的第一个。如果更改它们的顺序，首先将悬停状态置于其中，将显示非悬停状态，并且悬停状态不起作用。

这必然意味着问题在CSS中进一步发展。

看一下实际的CSS，你会看到：

.mali_oglas_izmena_selektovano {margin: 10px 0}
.mali_oglas_izmena_selektovano a {margin-right: 10px }

/
/* MALI OGLASI KATEGORIJE */

.kategorija_aksesoari {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0 0px}
.kategorija_izbor li a:hover .kategorija_aksesoari {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0 -24px}

请注意/评论前的/* MALI OGLASI KATEGORIJE */？删除它。它导致下一个CSS声明失败......恰好是非悬停状态。

P.S。只是为了澄清我是如何解决这个问题的 - 我在我的客户端使用Google Chrome Developer Tools来查看源代码并使用CSS文件。它允许你做一些很棒的事情，比如测试CSS和javascript的变化，而无需访问实际的源代码。

Answer 2

你的问题有两个方面：

你的CSS很乱，让你很难调试，可以理解
您的CSS仅在悬停时应用li span的背景图片：

.kategorija_izbor li a:hover .kategorija_aksesoari {
    background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0 -24px;
}

我建议修复两者。 ;）

干杯

CSS - 背景图像没有显示

2 个答案: