1

我正在尝试将 jQuery 工具覆盖与一些简单的代码结合起来，尽管覆盖不起作用。

我有几个 div 容器，如下所示。我遍历每个函数并添加“右边距：0”并每隔三个项目清除中断。


<div class="essay-thumb">
 <a href="link.html"><img src="src.jpg" alt="Alt text" width="210" height="140" /></a>
 <h5>Header Text h5</h5>
</div>
<div class="essay-thumb">
 <a href="link2.html"><img src="src2.jpg" alt="Alt text 2" width="210" height="140" /></a>
 <h5>Header Text h5 2</h5>
</div>
...


$('.essay-thumb').each(function(i){
 if ( ((i+1)%3) == 0 ) {
  $(this).css('margin-right', 0).after('<br class="clear" />');
 }
})

这里我添加了rel属性，抓取img中alt属性的内容，添加到<span class="tooltip"><p>...</p></span>标签的相关div容器中，设置不透明度通过CSS到0。


$('#content .essay-thumb').each(function(i){
 $(this).find('a').attr('rel', '#modal'+(i+1) );
 var title = $(this).find('img').attr('alt');
 var link = $(this).find('a').attr('href');
 $('<span class="tooltip"><\/span>').appendTo($(this))
 $('<p><\/p>').text(title).appendTo($(this).find('.tooltip'));
})

然后我在悬停时将不透明度设置为 0.8 并返回到 0


$('#content .essay-thumb').hover(function(e) {
  $(this).find('.tooltip').stop().animate({opacity: .8}, 500);
 }, function () { 
  $(this).find('.tooltip').stop().animate({opacity: 0}, 200);
 })

最后，我有一条线可以在点击时触发覆盖。但是这不起作用，我想知道为什么？据我所知，覆盖事件未附加到相关标签。非常感谢任何帮助。


$("#content .essay-thumb a[rel]").overlay({ expose: '#000', effect: 'apple' });
4

0 回答 0