1

大きな問題があります。jQuery と CSS を使用して、ポートフォリオのサムネイル間でフェードする「フェード スクリプト」をポートフォリオに含めました。残念ながら、リンクできない 2 つの img クラスに基づいています。

つまり、画像 green.jpg を URL (この場合はライトボックス内の YouTube クリップ) にリンクするのが好きです。

誰でもこれを解決する方法を知っていますか?

HTML:

<div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              </a>
              <img class="top" src="img/a_childish_letter.jpg" />
            </div>
</div>

CSS:

#cf {
  position:relative;
  height:200px;
  width:310px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity .7s ease-in-out;
  -moz-transition: opacity .7s ease-in-out;
  -o-transition: opacity .7s ease-in-out;
  transition: opacity .7s ease-in-out;
  cursor:pointer;
}

#cf img.top:hover {
  opacity:0;
}

どうもありがとう！参考になる場合は、http://www.axeltagg.com/test/のページをご覧ください。

よろしくお願いします！/アクセル

4

3 に答える 3

0

両方の画像にアンカー タグを追加する必要があります。または、緑のイメージをより高い z-index に設定します。

最初の解決策:

これを変える：

<div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              </a>
              <img class="top" src="img/a_childish_letter.jpg" />
            </div>
</div>

これに：

<div class="item">
            <div id="cf">
              <a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">
                <img class="bottom" src="img/green.jpg" border="0" />
              <img class="top" src="img/a_childish_letter.jpg" />
              </a>
            </div>
</div>

2番目の解決策:

.bottom{
    z-index: 1;/* Try Higher numbers if it doesn't work or add !important */
}

Google Chrome でテストしたところ、動作しました。

于 2013-06-23T19:49:58.433 に答える