由于将margin: -107px 0 0 0;样式应用于页脚,因此让jQuery在页脚中单击图像时出现问题。我不明白为什么这会引起问题,因为当我检查网站时仍然可以看到DOM中的图像。我还注意到在页脚中突出显示“ Grilled Chicken Pesto Sandwich”一词时遇到了问题,我相信这也是由于在页脚中使用了margin: -107px 0 0 0;样式。

Link to website

//jQuery
$("footer #thumbs ul li figure img").click(function() {
  var id = $(this).attr('id');
  $.backstretch(images[id]);
  $('html').css('background-size', 'cover');
});

//css
footer {
  margin: -107px 0 0 0; //The -107px is causing the problem
  width: 100%;
  height: 107px;
  background: url(../img/bottom.png) repeat-x;
}

//html
<footer>
  <div id="thumbsDesc">Grilled Chicken Pesto Sandwich</div>
  <div id="thumbs">
    <ul>
      <li><figure><img id="0" src="img/01.jpg"></figure></li>
      <li><figure><img id="1" src="img/02.jpg"></figure></li>
      <li><figure><img id="2" src="img/03.jpg"></figure></li>
      <li><figure><img id="3" src="img/04.jpg"></figure></li>
    </ul>
  </div>
</footer>

最佳答案

您需要减少包装类的z-index,我在firebug上尝试了一下,然后能够选择文本并单击图像。无需增加脚的Z索引
我用-10包装

编辑:同样,如果您删除包装器上的相对位置,它也可以工作,因此您可以做最适合所有浏览器的操作,我只在FF上玩过

10-05 20:40
查看更多