1

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

链接到网站

//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>
4

3 回答 3

2

对于标记的 div，id="thumbs"将其 css 设置为

position: absolute;
z-index: 1;
left: 120px;
于 2012-05-08T19:03:13.617 回答
1

它看起来像div class="wrapper"覆盖页脚。（尝试更改z-index页脚。） - 不起作用，抱歉。尝试将页脚放在包装器内。

于 2012-05-08T18:55:52.077 回答
1

您需要减少包装类的 z-index，我在 firebug 上尝试过这个，我能够选择文本并单击图像。无需增加脚 z-index 我使用 -10 作为包装器

编辑：另外，如果你删除包装器上的相对位置，它也可以工作，所以你可以做任何你认为最适合所有浏览器的事情，我只在 FF 上玩过这个

于 2012-05-08T19:01:36.270 回答