jquery - 将图像链接到 <img class> 中的 URL

Question

我有一个大问题。我在我的投资组合中加入了一个“淡入淡出脚本”，它使用 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/

致以最诚挚的问候!/阿克塞尔

Answer 1

您需要将 anchor 标记添加到两个图像。或者将绿色图像设置为更高的 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>

第二种方案:

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

我在 Google Chrome 中对其进行了测试，它可以正常工作!