图像映射和chrome中的一些情况不起作用

Question

我接近放弃了。

我正在调查大约4个小时。我无法找到此页面的问题。

我在暂存http://www-s.trueaussiebeefandlamb.com/proteins/grassfed-beef/中有此页面，这在预生产中http://www-p.trueaussiebeefandlamb.com/proteins/grassfed-beef/

在staging中，所有浏览器都可以正常运行。在Pre中，在Chrome中，鼠标悬停的牛肉不会改变图像。这个想法是当用户将鼠标悬停在动物上时突出显示的剪切。这在IE中工作正常。

在我的调查中，如果我在Chrome-devtools中将background: url("../lamb-sprite.png");更改为background: red url("../lamb-sprite.png");，那么bahaviour就能正常运行。

我不想添加任何类型的Jquery来更改此页面的CSS。我不认为这是最好的解决方案。

Answer 1

我认为图像隐藏在某个z-index值后面。尝试：

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