イメージマップとクロムのいくつかのケースが動作しない

Question

私は諦めています。

私は約4時間にわたり調査中です。そして、私はこのページの問題を見つけることができません。

私はステージングではプリプロダクションhttp://www-p.trueaussiebeefandlamb.com/proteins/grassfed-beef/

にhttp://www-s.trueaussiebeefandlamb.com/proteins/grassfed-beef/と、このステージングで、このページを持っているすべてのブラウザで正常に動作します。 Preでは、Chromeでは、牛のマウスホバーが画像を変更しません。そのアイデアは、動物の上のユーザーマウスが強調表示されたときです。これはIEで正常に動作します。

私の調査では、Chrome-devtoolsのbackground: url("../lamb-sprite.png");をbackground: red url("../lamb-sprite.png");に変更すると、その機能が動作します。

このページのCSSを変更するためにJqueryを追加したくありません。私はこれが最善の解決策だとは思わない。

Answer 1

私は画像がZ-インデックスの値の中に隠れていると思います。試してみてください：

.protein-cut .image-map img { 
    display: block; 
    z-index: 10; 
    position: relative; 
}