1

margin: -107px 0 0 0;フッターにスタイルが適用されているため、jQueryでフッターの画像をクリックするのに問題があります。ウェブサイトを調べてもDOMに画像が表示されているので、なぜこれが問題を引き起こしているのかわかりません。また、フッターで「グリルドチキンペストサンドイッチ」という言葉を強調するのに問題があることに気づきました。これは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 に答える