由于将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上玩过