レスポンシブなイメージマップを使用しているサイトがあり、このレスポンシブなイメージマップのためにクロスブラウザーのロールオーバー効果を得ることは非常に困難でした。私は最終的にChromeとSafariで動作するソリューションを思いつきましたが、Firefoxではおかしくはありません。Firefox CSSのホバーのバグ
area.band-hover-1 {
z-index: 999999;
background-repeat: no-repeat;
display: block;
content: " ";
position: absolute;
top: 99px;
left: 300px;
height: 100px;
width: 109px;
background-size: contain;
}
area.band-hover-1:hover {
background-image: url(../img/band-hover-1.png);
}
CSSは、私はそれは開発ツールで参照する画像(.band-ホバー-1:ホバー)を見ることができるFirefoxで適用されているが、ロールオーバー画像は、Firefoxにして、Googleの研究の時間後に表示されていません私はちょうど問題が何であるか把握することができません。
Firefoxでこれが動作しない理由を知っている人はいますか? CSSに関連している必要があります。
ありがとうございます!
ライブサイトへのリンクではなく関連するコードをここに投稿してください。これは将来変更される可能性があります。質問は何年も関連が必要です。 – Barmar
ここに意味のあるコードと問題の説明を追加してください。修復が必要なサイト にリンクしないでください。そうしないと、 問題が解決されたり、リンク先のサイトにアクセスできない場合、この質問は将来の訪問者に価値を失います。 [最小、完全、および検証可能な例(MCVE)](https://stackoverflow.com/help/mcve)を投稿すると、 があなたの問題を実証してくれます。詳細については、 [私のWebサイトの何かが動作しません。 ]リンクを貼り付けることはできますか?](https://meta.stackexchange.com/questions/125997/) ありがとう! – j08691
よろしくお願いいたします。謝罪します。私は質問に言い直し、ガイドラインを読みました。お待ちいただいてありがとうございます。 – user436421