2017-06-15 7 views
1

レスポンシブなイメージマップを使用しているサイトがあり、このレスポンシブなイメージマップのためにクロスブラウザーのロールオーバー効果を得ることは非常に困難でした。私は最終的に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に関連している必要があります。


ありがとうございます!

+0

ライブサイトへのリンクではなく関連するコードをここに投稿してください。これは将来変更される可能性があります。質問は何年も関連が必要です。 – Barmar

+0

ここに意味のあるコードと問題の説明を追加してください。修復が必要なサイト にリンクしないでください。そうしないと、 問題が解決されたり、リンク先のサイトにアクセスできない場合、この質問は将来の訪問者に価値を失います。 [最小、完全、および検証可能な例(MCVE)](https://stackoverflow.com/help/mcve)を投稿すると、 があなたの問題を実証してくれます。詳細については、 [私のWebサイトの何かが動作しません。 ]リンクを貼り付けることはできますか?](https://meta.stackexchange.com/questions/125997/) ありがとう! – j08691

+0

よろしくお願いいたします。謝罪します。私は質問に言い直し、ガイドラインを読みました。お待ちいただいてありがとうございます。 – user436421

答えて

1

誰かにも同様の問題がありました。 CSSのより具体的なセレクタを使用して解決されました.class:hover not working in firefox?

+0

ありがとう、私は以前にスレッドを試して、セレクタにエリアタグを追加しても解決しませんでした。 – user436421

+1

私は、Firefoxがホバーのためのコードを好きではないと解決しました。私はラッパーdivを作成し、これが問題を解決しました。 – user436421