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

// Get image URLs
var current_image_top = $('div#cf').children('img.top').attr('src');

var current_image_bottom = $('div#cf').find('a').children('img.bottom').attr('src');

//Set image URLs
$('div#cf').children('img.top').attr('src', 'new_image.jpg');

$('div#cf').find('a').children('img.bottom').attr('src', 'new_image.jpg');

Answer 2

尝试将此代码另存为html并在浏览器中打开：

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <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>

<button>Fade Image with top class</button>
<button>Fade Image with bottom class</button>
<script>
$("button:first").click(function() {
  $('div#cf').children('img.top').fadeToggle("slow", "linear");
});

$("button:last").click(function () {
  $('div#cf').find('a').children('img.bottom').fadeToggle("slow", "linear");
});
</script>
</body>
</html>

Answer 3

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

我在谷歌浏览器中测试了它，它确实有效！

将图片链接到<img class=""/>内的网址

3 个答案: