0

私はかなり珍しい問題を抱えています。説明するのは難しいので、これはあなたが見ることができるアドレスです（ウェブサイトはまだ開発中です、PHPエラーを気にしないでください）。

問題は次のとおりです-サイドバーメニュー（右側のKategorijeの下にアイコンがあります）が動的に作成され、各liにはアイコン用に作成されたスパンタグがあります（背景画像として使用されます）。これは、最初のもの（ 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 Developer Toolsを使用してソースを表示し、CSSファイルで遊んでいました。実際のソースにアクセスしなくても、CSSやJavaScriptのテスト変更など、すばらしいことができます。

于 2012-11-15T21:06:08.120 に答える
-1

あなたの問題は2つあります：

  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 に答える