0

我有一个相当不寻常的问题。很难解释，所以这是您可以查看的地址（网站仍在开发中，不要为 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}
4

2 回答 2

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 声明失败......这恰好是非悬停状态。

PS 只是为了澄清我是如何解决这个问题的——我使用Google Chrome 开发人员工具在我的客户端上查看源代码并使用 CSS 文件。它允许你做一些很棒的事情，比如在 CSS 和 javascript 中测试更改，而无需访问实际源代码。

于 2012-11-15T21:06:08.120 回答
-1

您的问题有两个方面：

  1. 你的 CSS 是一团糟，让你很难调试，这是可以理解的
  2. 您的 CSS 仅将背景图像应用于li span悬停：
.kategorija_izbor li a:hover .kategorija_aksesoari {
    background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0 -24px;
}

我建议修复两者。;)

干杯

于 2012-11-15T20:54:36.073 回答